From 55088a53f6808c75fa85b7087ade62c356050cc9 Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Mon, 25 Sep 2023 15:50:03 +0300
Subject: [PATCH] CW-2110 Added font-display: swap for optimization

---
 src/index.scss        |  8 ++++++++
 src/styles/fonts.scss | 23 +++++++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/index.scss b/src/index.scss
index db9da78b7f..52dea0696a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,41 +4,49 @@
 @font-face {
   font-family: NotoSerifSC-Black;
   src: url("/shared/assets/fonts/NotoSerifSC-Black.otf");
+  font-display: swap;
 }
 
 @font-face {
   font-family: NunitoSans-Regular;
   src: url("/shared/assets/fonts/NunitoSans-Regular.ttf");
+  font-display: swap;
 }
 
 @font-face {
   font-family: NotoSerifSC-Bold;
   src: url("/shared/assets/fonts/NotoSerifSC-Bold.otf");
+  font-display: swap;
 }
 
 @font-face {
   font-family: NotoSerifSC-SemiBold;
   src: url("/shared/assets/fonts/NotoSerifSC-SemiBold.otf");
+  font-display: swap;
 }
 
 @font-face {
   font-family: NunitoSans-SemiBold;
   src: url("/shared/assets/fonts/NunitoSans-SemiBold.ttf");
+  font-display: swap;
 }
 
 @font-face {
   font-family: NunitoSans-Bold;
   src: url("/shared/assets/fonts/NunitoSans-Bold.ttf");
+  font-display: swap;
 }
 
 @font-face {
   font-family: Assistant-Bold;
   src: url("/shared/assets/fonts/Assistant-Bold.ttf");
+  font-display: swap;
 }
 
 @font-face {
   font-family: Assistant-Light;
   src: url("/shared/assets/fonts/Assistant-Light.ttf");
+  font-display: swap;
 }
 
 body {
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 6ba4ecfd7e..4edbb5db4a 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -14,6 +14,7 @@ $openTypeFontFormat: "opentype";
   src: local($nunitoSansFontName),
     url("/shared/assets/fonts/NunitoSans-Light.ttf") format($trueTypeFontFormat);
   font-weight: 300;
+  font-display: swap;
 }
 
 @font-face {
@@ -22,6 +23,7 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/NunitoSans-Regular.ttf")
       format($trueTypeFontFormat);
   font-weight: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -31,6 +33,7 @@ $openTypeFontFormat: "opentype";
       format($trueTypeFontFormat);
   font-weight: normal;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
@@ -39,6 +42,7 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/NunitoSans-SemiBold.ttf")
       format($trueTypeFontFormat);
   font-weight: 600;
+  font-display: swap;
 }
 
 @font-face {
@@ -46,6 +50,7 @@ $openTypeFontFormat: "opentype";
   src: local($nunitoSansFontName),
     url("/shared/assets/fonts/NunitoSans-Bold.ttf") format($trueTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 @font-face {
@@ -54,6 +59,7 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/NunitoSans-ExtraBold.ttf")
       format($trueTypeFontFormat);
   font-weight: 800;
+  font-display: swap;
 }
 
 // NotoSerifSC
@@ -63,6 +69,7 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/NotoSerifSC-SemiBold.otf")
       format($openTypeFontFormat);
   font-weight: 600;
+  font-display: swap;
 }
 
 @font-face {
@@ -70,6 +77,7 @@ $openTypeFontFormat: "opentype";
   src: local($notoSerifSCFontName),
     url("/shared/assets/fonts/NotoSerifSC-Bold.otf") format($openTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 @font-face {
@@ -78,6 +86,7 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/NotoSerifSC-Black.otf")
       format($openTypeFontFormat);
   font-weight: 900;
+  font-display: swap;
 }
 
 // Assistant
@@ -86,6 +95,7 @@ $openTypeFontFormat: "opentype";
   src: local($assistantFontName),
     url("/shared/assets/fonts/Assistant-Light.ttf") format($trueTypeFontFormat);
   font-weight: 300;
+  font-display: swap;
 }
 
 @font-face {
@@ -93,6 +103,7 @@ $openTypeFontFormat: "opentype";
   src: local($assistantFontName),
     url("/shared/assets/fonts/Assistant-Bold.ttf") format($trueTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 // Heebo
@@ -101,6 +112,7 @@ $openTypeFontFormat: "opentype";
   src: local($heeboFontName),
     url("/shared/assets/fonts/Heebo-Regular.ttf") format($trueTypeFontFormat);
   font-weight: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -108,6 +120,7 @@ $openTypeFontFormat: "opentype";
   src: local($heeboFontName),
     url("/shared/assets/fonts/Heebo-Medium.ttf") format($trueTypeFontFormat);
   font-weight: 500;
+  font-display: swap;
 }
 
 @font-face {
@@ -115,6 +128,7 @@ $openTypeFontFormat: "opentype";
   src: local($heeboFontName),
     url("/shared/assets/fonts/Heebo-Bold.ttf") format($trueTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 // Lexend
@@ -123,6 +137,7 @@ $openTypeFontFormat: "opentype";
   src: local($lexendFontName),
     url("/shared/assets/fonts/Lexend-Light.ttf") format($trueTypeFontFormat);
   font-weight: 300;
+  font-display: swap;
 }
 
 @font-face {
@@ -130,6 +145,7 @@ $openTypeFontFormat: "opentype";
   src: local($lexendFontName),
     url("/shared/assets/fonts/Lexend-Regular.ttf") format($trueTypeFontFormat);
   font-weight: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -137,6 +153,7 @@ $openTypeFontFormat: "opentype";
   src: local($lexendFontName),
     url("/shared/assets/fonts/Lexend-Bold.ttf") format($trueTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 // Poppins
@@ -145,6 +162,7 @@ $openTypeFontFormat: "opentype";
   src: local($poppinsSansFontName),
     url("/shared/assets/fonts/Poppins-Regular.ttf") format($trueTypeFontFormat);
   font-weight: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -153,6 +171,7 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/Poppins-Italic.ttf") format($trueTypeFontFormat);
   font-weight: normal;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
@@ -160,6 +179,7 @@ $openTypeFontFormat: "opentype";
   src: local($poppinsSansFontName),
     url("/shared/assets/fonts/Poppins-Medium.ttf") format($trueTypeFontFormat);
   font-weight: 500;
+  font-display: swap;
 }
 
 @font-face {
@@ -167,6 +187,7 @@ $openTypeFontFormat: "opentype";
   src: local($poppinsSansFontName),
     url("/shared/assets/fonts/Poppins-SemiBold.ttf") format($trueTypeFontFormat);
   font-weight: 600;
+  font-display: swap;
 }
 
 @font-face {
@@ -174,6 +195,7 @@ $openTypeFontFormat: "opentype";
   src: local($poppinsSansFontName),
     url("/shared/assets/fonts/Poppins-Bold.ttf") format($trueTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 @font-face {
@@ -182,4 +204,5 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/Poppins-ExtraBold.ttf")
       format($trueTypeFontFormat);
   font-weight: 800;
+  font-display: swap;
 }