CW-2110 Added font-display: swap for optimization

daostack · Sep 25, 2023 · 55088a5 · 55088a5
1 parent 527b63e
commit 55088a5
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git 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
@@ -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,13 +42,15 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/NunitoSans-SemiBold.ttf")
       format($trueTypeFontFormat);
   font-weight: 600;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $nunitoSansFontName;
   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,13 +69,15 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/NotoSerifSC-SemiBold.otf")
       format($openTypeFontFormat);
   font-weight: 600;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $notoSerifSCFontName;
   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,13 +95,15 @@ $openTypeFontFormat: "opentype";
   src: local($assistantFontName),
     url("/shared/assets/fonts/Assistant-Light.ttf") format($trueTypeFontFormat);
   font-weight: 300;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $assistantFontName;
   src: local($assistantFontName),
     url("/shared/assets/fonts/Assistant-Bold.ttf") format($trueTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 // Heebo
@@ -101,20 +112,23 @@ $openTypeFontFormat: "opentype";
   src: local($heeboFontName),
     url("/shared/assets/fonts/Heebo-Regular.ttf") format($trueTypeFontFormat);
   font-weight: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $heeboFontName;
   src: local($heeboFontName),
     url("/shared/assets/fonts/Heebo-Medium.ttf") format($trueTypeFontFormat);
   font-weight: 500;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $heeboFontName;
   src: local($heeboFontName),
     url("/shared/assets/fonts/Heebo-Bold.ttf") format($trueTypeFontFormat);
   font-weight: bold;
+  font-display: swap;
 }
 
 // Lexend
@@ -123,20 +137,23 @@ $openTypeFontFormat: "opentype";
   src: local($lexendFontName),
     url("/shared/assets/fonts/Lexend-Light.ttf") format($trueTypeFontFormat);
   font-weight: 300;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $lexendFontName;
   src: local($lexendFontName),
     url("/shared/assets/fonts/Lexend-Regular.ttf") format($trueTypeFontFormat);
   font-weight: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $lexendFontName;
   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,27 +171,31 @@ $openTypeFontFormat: "opentype";
     url("/shared/assets/fonts/Poppins-Italic.ttf") format($trueTypeFontFormat);
   font-weight: normal;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $poppinsSansFontName;
   src: local($poppinsSansFontName),
     url("/shared/assets/fonts/Poppins-Medium.ttf") format($trueTypeFontFormat);
   font-weight: 500;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $poppinsSansFontName;
   src: local($poppinsSansFontName),
     url("/shared/assets/fonts/Poppins-SemiBold.ttf") format($trueTypeFontFormat);
   font-weight: 600;
+  font-display: swap;
 }
 
 @font-face {
   font-family: $poppinsSansFontName;
   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;
 }