{% load static %}
@font-face {
    font-family: 'AND';
    font-style: normal;
    font-weight: normal;
    src: url('{% static "fonts/AND-Regular.ttf" %}') format('truetype');
}
@font-face {
    font-family: 'AND';
    font-style: normal;
    font-weight: bold;
    src: url('{% static "fonts/AND-Regular.ttf" %}') format('truetype');
}

{% for family, styles in fonts.items %}
{% for style, formats in styles.items %}
{% if "sample" not in style %}
@font-face {
    font-family: '{{ family }}';
    {% if style == "italic" or style == "bolditalic" %}
        font-style: italic;
    {% else %}
        font-style: normal;
    {% endif %}
    {% if style == "bold" or style == "bolditalic" %}
        font-weight: bold;
    {% else %}
        font-weight: normal;
    {% endif %}
    src: {% if "woff2" in formats %}url('{% static formats.woff2 %}') format('woff2'),{% endif %}
         {% if "woff" in formats %}url('{% static formats.woff %}') format('woff'),{% endif %}
         {% if "truetype" in formats %}url('{% static formats.truetype %}') format('truetype'){% endif %};
}
.preload-font[data-family="{{family}}"][data-style="{{style}}"] {
    font-family: '{{ family }}', 'AND';
    {% if style == "italic" or style == "bolditalic" %}
        font-style: italic;
    {% else %}
        font-style: normal;
    {% endif %}
    {% if style == "bold" or style == "bolditalic" %}
        font-weight: bold;
    {% else %}
        font-weight: normal;
    {% endif %}

}
{% endif %}
{% endfor %}
{% endfor %}