From 984f311061fd504b5a71310b40d0947fee525a52 Mon Sep 17 00:00:00 2001
From: Twaha Rahman <39026437+Twaha-Rahman@users.noreply.github.com>
Date: Mon, 21 Sep 2020 19:06:44 +0600
Subject: [PATCH] fix(Client): Use `font-display: fallback` to avoid FOIT
 (#39628)

---
 client/src/components/layouts/fonts.css     | 8 ++++++++
 client/src/pages/certification.css          | 1 +
 tools/dashboard/probot/client/src/index.css | 3 +++
 3 files changed, 12 insertions(+)

diff --git a/client/src/components/layouts/fonts.css b/client/src/components/layouts/fonts.css
index 3b07b4de11..8dc0c78d25 100644
--- a/client/src/components/layouts/fonts.css
+++ b/client/src/components/layouts/fonts.css
@@ -3,6 +3,7 @@
   src: url('../../../static/fonts/lato/Lato-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
+  font-display: fallback;
 }
 
 @font-face {
@@ -10,6 +11,7 @@
   src: url('../../../static/fonts/lato/Lato-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
+  font-display: fallback;
 }
 
 @font-face {
@@ -17,6 +19,7 @@
   src: url('../../../static/fonts/lato/Lato-Italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
+  font-display: fallback;
 }
 
 @font-face {
@@ -24,6 +27,7 @@
   src: url('../../../static/fonts/lato/Lato-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
+  font-display: fallback;
 }
 
 @font-face {
@@ -31,6 +35,7 @@
   src: url('../../../static/fonts/lato/Lato-Black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
+  font-display: fallback;
 }
 
 /* roboto mono */
@@ -41,6 +46,7 @@
     format('woff');
   font-weight: normal;
   font-style: normal;
+  font-display: fallback;
 }
 
 @font-face {
@@ -49,6 +55,7 @@
     format('woff');
   font-weight: normal;
   font-style: italic;
+  font-display: fallback;
 }
 
 @font-face {
@@ -57,4 +64,5 @@
     format('woff');
   font-weight: bold;
   font-style: normal;
+  font-display: fallback;
 }
diff --git a/client/src/pages/certification.css b/client/src/pages/certification.css
index fd53d573b3..cd6a59a1fb 100644
--- a/client/src/pages/certification.css
+++ b/client/src/pages/certification.css
@@ -1,6 +1,7 @@
 @font-face {
   font-family: 'Sax Mono';
   src: url('/fonts/saxmono.ttf') format('truetype');
+  font-display: fallback;
 }
 
 .certification-namespace * {
diff --git a/tools/dashboard/probot/client/src/index.css b/tools/dashboard/probot/client/src/index.css
index 1a538b312e..e4d3e47d89 100644
--- a/tools/dashboard/probot/client/src/index.css
+++ b/tools/dashboard/probot/client/src/index.css
@@ -1,16 +1,19 @@
 @font-face {
   font-family: 'Lato';
   src: url(./fonts/Lato-Regular.ttf) format('truetype');
+  font-display: fallback;
 }
 
 @font-face {
   font-family: 'Lato Light';
   src: url(./fonts/Lato-Light.ttf) format('truetype');
+  font-display: fallback;
 }
 
 @font-face {
   font-family: 'Lato Bold';
   src: url(./fonts/Lato-Bold.ttf) format('truetype');
+  font-display: fallback;
 }
 
 * {