Implement non-blocking fonts

web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_fonts.scss

@@ -2,6 +2,7 @@
     font-family: 'Cairo';
     font-style: normal;
     font-weight: 400;
+    font-display: swap;
     src: url('../fonts/cairo-v2-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
     src: local('Cairo'), local('Cairo-Regular'),
     url('../fonts/cairo-v2-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@@ -15,6 +16,7 @@
     font-family: 'Cairo';
     font-style: normal;
     font-weight: 700;
+    font-display: swap;
     src: url('../fonts/cairo-v2-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
     src: local('Cairo Bold'), local('Cairo-Bold'),
     url('../fonts/cairo-v2-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@@ -28,6 +30,7 @@ $font-main: 'Cairo', $helvetica;
 
 @font-face {
     font-family: 'fontello';
+    font-display: swap;
     src: url('../fonts/fontello.eot?39986861');
     src: url('../fonts/fontello.eot?39986861#iefix') format('embedded-opentype'),
     url('../fonts/fontello.woff2?39986861') format('woff2'),

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_mixins.scss

@@ -78,3 +78,34 @@
         opacity: 1;
     }
 }
+
+@mixin font-face(
+  $font-family,
+  $file-path,
+  $weight: normal,
+  $style: normal,
+  $asset-pipeline: $asset-pipeline,
+  $file-formats: eot woff2 woff ttf svg) {
+
+  $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;
+  $output-bourbon-deprecation-warnings: false !global;
+
+  $font-url-prefix: font-url-prefixer($asset-pipeline);
+
+  @font-face {
+    font-family: $font-family;
+    font-style: $style;
+    font-weight: $weight;
+    font-display: swap;
+
+    src: font-source-declaration(
+        $font-family,
+        $file-path,
+        $asset-pipeline,
+        $file-formats,
+        $font-url-prefix
+    );
+  }
+
+  $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;
+}