fix(templates): adopt font-display: block for better icon font loading

itgalaxy · Sep 29, 2020 · 4669891 · 4669891
1 parent 0f9dbc0
commit 4669891
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/templates/template.css.njk b/templates/template.css.njk
@@ -1,8 +1,8 @@
 @font-face {
+  font-display: auto;
   font-family: "{{ fontName }}";
   font-style: normal;
   font-weight: 400;
-  font-display: auto;
   {% if formats.indexOf('eot')>-1 -%}
     src: url("{{ fontPath }}{{ fontName }}.eot{% if hash %}?v={{ hash }}{% endif %}");
   {%- endif %}

diff --git a/templates/template.html.njk b/templates/template.html.njk
@@ -46,10 +46,10 @@
       }
 
       @font-face {
+        font-display: block;
         font-family: "{{ fontName }}";
         font-style: normal;
         font-weight: 400;
-        font-display: auto;
         {% if formats.indexOf('eot')>-1 -%}
           src: url("{{ fontPath }}{{ fontName }}.eot{% if hash %}?v={{ hash }}{% endif %}");
         {%- endif %}

diff --git a/templates/template.scss.njk b/templates/template.scss.njk
@@ -3,10 +3,10 @@
 {% endfor %}
 
 @font-face {
+  font-display: block;
   font-family: "{{ fontName }}";
   font-style: normal;
   font-weight: 400;
-  font-display: auto;
   {% if formats.indexOf('eot')>-1 -%}
     src: url("{{ fontPath }}{{ fontName }}.eot{% if hash %}?v={{ hash }}{% endif %}");
   {%- endif -%}

diff --git a/templates/template.styl.njk b/templates/template.styl.njk
@@ -4,36 +4,37 @@
 @font-face {
     font-family: {{ fontName }};
     {% if formats.indexOf('eot')>-1 -%}
-        src: url("{{ fontPath }}{{ fontName }}.eot");
+        src: url("{{ fontPath }}{{ fontName }}.eot{% 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?#iefix") format("embedded-opentype")
+            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") format("woff2")
+            url("{{ fontPath }}{{ fontName }}.woff2{% 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") format("woff")
+            url("{{ fontPath }}{{ fontName }}.woff{% 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") format("truetype")
+            url("{{ fontPath }}{{ fontName }}.ttf{% 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#{{ fontName }}") format("svg");
+            url("{{ fontPath }}{{ fontName }}.svg{% if hash %}?v={{ hash }}{% endif %}#{{ fontName }}") format("svg");
         {%- endif %}
+    font-display: block;
     font-style: normal;
     font-weight: 400;
 }