@font-face {
  font-display: auto;
  font-family: "{{ fontName }}";
  font-style: normal;
  font-weight: 400;
  {% if formats.indexOf('eot')>-1 -%}
    src: url("{{ fontPath }}{{ fontName }}.eot?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}");
  {%- endif %}
  {%- set eotIndex = formats.indexOf('eot') -%}
  {%- set woff2Index = formats.indexOf('woff2') -%}
  {%- set woffIndex = formats.indexOf('woff') -%}
  {%- set ttfIndex = formats.indexOf('ttf') -%}
  {%- set svgIndex = formats.indexOf('svg') %}
  src: {% if eotIndex != -1 -%}
    url("{{ fontPath }}{{ fontName }}.eot?{% if hash %}v={{ hash }}{% endif %}#iefix") format("embedded-opentype")
    {%- set nothing = formats.splice(eotIndex, 1) -%}
    {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
  {%- endif -%}
  {%- if woff2Index != -1 -%}
    url("{{ fontPath }}{{ fontName }}.woff2?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}") format("woff2")
    {%- set nothing = formats.splice(woff2Index, 1) -%}
    {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
  {%- endif -%}
  {%- if woffIndex != -1 -%}
    url("{{ fontPath }}{{ fontName }}.woff?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}") format("woff")
    {%- set nothing = formats.splice(woffIndex, 1) -%}
    {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
  {%- endif -%}
  {%- if ttfIndex != -1 -%}
    url("{{ fontPath }}{{ fontName }}.ttf?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}") format("truetype")
    {%- set nothing = formats.splice(ttfIndex, 1) -%}
    {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
  {%- endif -%}
  {%- if svgIndex != -1 -%}
    url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ fontName }}") format("svg");
  {%- endif %}
}

.{{ className }} {
  display: inline-block;
  font-family: "{{ fontName }}";
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.{{ className }}-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -0.0667em;
}

.{{ className }}-xs {
  font-size: 0.75em;
}

.{{ className }}-sm {
  font-size: 0.875em;
}

.{{ className }}-1x {
  font-size: 1em;
}

.{{ className }}-2x {
  font-size: 2em;
}

.{{ className }}-3x {
  font-size: 3em;
}

.{{ className }}-4x {
  font-size: 4em;
}

.{{ className }}-5x {
  font-size: 5em;
}

.{{ className }}-6x {
  font-size: 6em;
}

.{{ className }}-7x {
  font-size: 7em;
}

.{{ className }}-8x {
  font-size: 8em;
}

.{{ className }}-9x {
  font-size: 9em;
}

.{{ className }}-10x {
  font-size: 10em;
}

.{{ className }}-fw {
  text-align: center;
  width: 1.25em;
}

.{{ className }}-border {
  border: solid 0.08em #eee;
  border-radius: 0.1em;
  padding: 0.2em 0.25em 0.15em;
}

.{{ className }}-pull-left {
  float: left;
}

.{{ className }}-pull-right {
  float: right;
}

.{{ className }}.{{ className }}-pull-left {
  margin-right: 0.3em;
}

.{{ className }}.{{ className }}-pull-right {
  margin-left: 0.3em;
}

{% for glyph in glyphs %}
.{{ className }}-{{ glyph.name }}::before {
  content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
}
{% endfor %}