Merge pull request magento#4146 from magento-panda/MC-16046

Fixed issues: - MC-16046: Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading
okorshenko · May 3, 2019 · a5f9488 · a5f9488
2 parents 28757e4 + 5741106
commit a5f9488
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/app/design/frontend/Magento/blank/web/css/source/_typography.less b/app/design/frontend/Magento/blank/web/css/source/_typography.less
@@ -12,28 +12,32 @@
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/light/opensans-300',
         @font-weight: 300,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 
     .lib-font-face(
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/regular/opensans-400',
         @font-weight: 400,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 
     .lib-font-face(
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/semibold/opensans-600',
         @font-weight: 600,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 
     .lib-font-face(
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/bold/opensans-700',
         @font-weight: 700,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 }
 

diff --git a/lib/web/css/source/lib/_typography.less b/lib/web/css/source/lib/_typography.less
@@ -11,14 +11,16 @@
     @family-name,
     @font-path,
     @font-weight: normal,
-    @font-style: normal
+    @font-style: normal,
+    @font-display: auto
 ) {
     @font-face {
         font-family: @family-name;
         src: url('@{font-path}.woff2') format('woff2'),
         url('@{font-path}.woff') format('woff');
         font-weight: @font-weight;
         font-style: @font-style;
+        font-display: @font-display;
     }
 }