{% load static %}
<div class="ms-font-picker" id="msFontPreviews">
    <div class="ms-density-options" role="group" aria-label="{{ MS_TRANS.typography }}">
    {% for font in option_fonts %}
        <button
            type="button"
            class="ms-density-option ms-font-option{% if selected_font == font.slug %} is-active{% endif %}"
            data-font="{{ font.slug }}"
        >
            <span class="ms-density-option__icon ms-font-option__icon" aria-hidden="true">
                <span class="font-preview-sample">Aa</span>
            </span>
            <span class="ms-density-option__copy">
                <strong>{{ font.label }}</strong>
                <small>{{ font.slug }}</small>
            </span>
        </button>
    {% endfor %}
    </div>
</div>