Ensure Text Remains Visible During Webfont Load In Magento 2
The way to do that is to specify a fallback system font that will display until the web font is ready. by using the CSS declaration font-display: swap, this tells the browser to display the text immediately with a fallback font and then swap it for the requested font face as soon as it loads.
1. Identification
Tools like GTMetrix, Google Lighthouse,Google Page speed insights
Example:
Before
@font-face
{ font-family: ‘Poppins’;font-style:
italic;font-weight: 200;
src: url( https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmv1pVFteOcEg.woff2 ) format(‘woff2’);
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}
After
@font-face
{ font-family: ‘Poppins’;font-style:
italic;font-weight: 200;
src: url ( https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmv1pVFteOcEg.woff2 ) format(‘woff2’);
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}
Skip to content
