From 8c91fe6ca81d6bebeb02860bd408ed07c4e2b66b Mon Sep 17 00:00:00 2001 From: Bagas Sanjaya Date: Tue, 9 Jun 2020 15:48:36 +0700 Subject: [PATCH] Ensure text remain visible during webfont load with font-display The `swap` argument on `font-display` instruct browsers to use fallback font for displaying texts until `@font-face` have been fully downloaded. Not specifying `font-display` cause PageSpeed Insights to complain on "Opportunities" category. --- web_src/less/_base.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index b926685415e50..a01ba65015b54 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -8,6 +8,7 @@ local('Roboto-Regular'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-regular.woff2') format('woff2'); + font-display: swap; } /* roboto-italic - latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext */ @@ -19,6 +20,7 @@ local('Roboto Italic'), local('Roboto-Italic'), url('../vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-italic.woff2') format('woff2'); + font-display: swap; } /* roboto-700 - latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext */ @@ -30,6 +32,7 @@ local('Roboto Bold'), local('Roboto-Bold'), url('../vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-700.woff2') format('woff2'); + font-display: swap; } /* roboto-700italic - latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext */ @@ -41,18 +44,21 @@ local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('../vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-700italic.woff2') format('woff2'); + font-display: swap; } @font-face { font-family: 'Yu Gothic'; src: local('Yu Gothic Medium'); font-weight: 400; + font-display: swap; } @font-face { font-family: 'Yu Gothic'; src: local('Yu Gothic Bold'); font-weight: 700; + font-display: swap; } @font-face { @@ -61,6 +67,7 @@ local('Noto Color Emoji'), local('Noto-Color-Emoji'), url('../vendor/assets/noto-color-emoji/NotoColorEmoji.ttf') format('truetype'); + font-display: swap; } @default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";