From ae354cf0600f9e9329fb9e79fb7969d59b25d185 Mon Sep 17 00:00:00 2001
From: felix-ico <97440128+felix-ico@users.noreply.github.com>
Date: Fri, 22 Sep 2023 10:34:27 +0200
Subject: [PATCH] fix: add font-display strategy for performance (#2135)

* fix: add font-display strategy for performance
---
 packages/components/src/global/fonts.css            | 12 ++++++++++++
 .../src/telekom/fonts/scale-fonts-telekom.css       | 13 +++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/packages/components/src/global/fonts.css b/packages/components/src/global/fonts.css
index a980a51202..fe8c05cbcf 100644
--- 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
index 37030e4b66..2712efce79 100644
--- 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;
 }