Merge pull request #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

Author: igrybkov

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
     );
 }
 

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;
     }
 }