fix: add font-display strategy for performance (#2135)

* fix: add font-display strategy for performance
telekom · Sep 22, 2023 · ae354cf · ae354cf
1 parent 2819d07
commit ae354cf
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/components/src/global/fonts.css b/packages/components/src/global/fonts.css
@@ -16,6 +16,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Ultra.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Ultra.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-Ultra.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -24,6 +25,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-UltraItalic.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-UltraItalic.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-UltraItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -32,6 +34,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-ExtraBold.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-ExtraBold.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-ExtraBold.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -40,6 +43,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-ExtraBoldItalic.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-ExtraBoldItalic.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-ExtraBoldItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -48,6 +52,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Bold.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Bold.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-Bold.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -56,6 +61,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-BoldItalic.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-BoldItalic.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-BoldItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -64,6 +70,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Medium.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Medium.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-Medium.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -72,6 +79,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-MediumItalic.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-MediumItalic.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-MediumItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -80,6 +88,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Regular.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Regular.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-Regular.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -88,6 +97,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-RegularItalic.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-RegularItalic.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-RegularItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -96,6 +106,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Thin.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-Thin.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-Thin.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -104,6 +115,7 @@
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-ThinItalic.eot');
   src: url('./fonts/TeleNeoWeb/TeleNeoWeb-ThinItalic.woff') format('woff'),
     url('./fonts/TeleNeoWeb/TeleNeoWeb-ThinItalic.woff2') format('woff2');
+  font-display: swap;
 }
 
 :root {

diff --git a/packages/components/src/telekom/fonts/scale-fonts-telekom.css b/packages/components/src/telekom/fonts/scale-fonts-telekom.css
@@ -16,6 +16,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-Ultra.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-Ultra.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-Ultra.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -24,6 +25,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-UltraItalic.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-UltraItalic.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-UltraItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -32,6 +34,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-ExtraBold.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-ExtraBold.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-ExtraBold.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -40,6 +43,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-ExtraBoldItalic.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-ExtraBoldItalic.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-ExtraBoldItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -48,6 +52,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-Bold.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-Bold.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-Bold.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -56,6 +61,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-BoldItalic.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-BoldItalic.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-BoldItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -64,6 +70,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-Medium.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-Medium.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-Medium.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -72,6 +79,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-MediumItalic.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-MediumItalic.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-MediumItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -80,6 +88,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-Regular.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-Regular.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-Regular.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -88,6 +97,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-RegularItalic.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-RegularItalic.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-RegularItalic.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -96,6 +106,7 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-Thin.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-Thin.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-Thin.woff2') format('woff2');
+  font-display: swap;
 }
 @font-face {
   font-family: 'TeleNeoWeb';
@@ -104,8 +115,10 @@
   src: url('./TeleNeoWeb/TeleNeoWeb-ThinItalic.eot');
   src: url('./TeleNeoWeb/TeleNeoWeb-ThinItalic.woff') format('woff'),
     url('./TeleNeoWeb/TeleNeoWeb-ThinItalic.woff2') format('woff2');
+  font-display: swap;
 }
 
 :root {
   font-family: 'TeleNeoWeb', sans-serif;
+  font-display: swap;
 }