add font-display: swap for better LCP (#1458)

dyc3 · Mar 7, 2024 · b8473a6 · b8473a6
1 parent b721d7d
commit b8473a6
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/client/src/fonts.scss b/client/src/fonts.scss
@@ -8,27 +8,31 @@ $unicode-cyrillic: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   font-weight: 400;
   src: url(/src/assets/fonts/roboto-italic.woff2) format('woff2');
   unicode-range: $unicode-latin;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: url(/src/assets/fonts/roboto-regular.woff2) format('woff2');
   unicode-range: $unicode-latin;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   src: url(/src/assets/fonts/roboto-medium-regular.woff2) format('woff2');
   unicode-range: $unicode-latin;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   src: url(/src/assets/fonts/roboto-bold.woff2) format('woff2');
   unicode-range: $unicode-latin;
+  font-display: swap;
 }
 
 /* Roboto Font - Cyrillic alphabet */
@@ -38,25 +42,29 @@ $unicode-cyrillic: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   font-weight: 400;
   src: url(/src/assets/fonts/roboto-italic-cyrillic.woff2) format('woff2');
   unicode-range: $unicode-cyrillic;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: url(/src/assets/fonts/roboto-regular-cyrillic.woff2) format('woff2');
   unicode-range: $unicode-cyrillic;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   src: url(/src/assets/fonts/roboto-medium-regular-cyrillic.woff2) format('woff2');
   unicode-range: $unicode-cyrillic;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   src: url(/src/assets/fonts/roboto-bold-cyrillic.woff2) format('woff2');
   unicode-range: $unicode-cyrillic;
-}
+  font-display: swap;
+}