Add font-display to display text before loading (#16330)

diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss
index 8079dc6fc9766de2723f5742ace4976823406477..ea7e04536aae695543c12ac3f945f76b8a04f573 100644 (file)
--- a/app/javascript/styles/fonts/montserrat.scss
+++ b/app/javascript/styles/fonts/montserrat.scss
@@ -5,6 +5,7 @@
     url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
     url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
+  font-display: swap;
   font-style: normal;
 }
 
@@ -13,5 +14,6 @@
   src: local('Montserrat Medium'),
     url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
+  font-display: swap;
   font-style: normal;
 }

diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss
index 2a1f74e16313381652f50b9371a3e04001273b6c..bd9839abfb7f252151d5df193cff195c629b5786 100644 (file)
--- a/app/javascript/styles/fonts/roboto-mono.scss
+++ b/app/javascript/styles/fonts/roboto-mono.scss
@@ -6,5 +6,6 @@
     url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
     url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
   font-weight: 400;
+  font-display: swap;
   font-style: normal;
 }

diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss
index f9c7c50fea4354f0db1d4803f9dd213b307b3645..f3a6dcb6e774ef2e1fafd07c0a2bf9222d304696 100644 (file)
--- a/app/javascript/styles/fonts/roboto.scss
+++ b/app/javascript/styles/fonts/roboto.scss
@@ -6,6 +6,7 @@
     url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
     url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
   font-weight: normal;
+  font-display: swap;
   font-style: italic;
 }
 
@@ -17,6 +18,7 @@
     url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
     url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
   font-weight: bold;
+  font-display: swap;
   font-style: normal;
 }
 
@@ -28,6 +30,7 @@
     url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
     url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
   font-weight: 500;
+  font-display: swap;
   font-style: normal;
 }
 
@@ -39,5 +42,6 @@
     url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
     url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
   font-weight: normal;
+  font-display: swap;
   font-style: normal;
 }