Skip to content
Overview
What can you do to display text correctly while web fonts are loading on your Shopify website, and to fix the page speed insight opportunity? Read this blog and find.
How to Identify ‘Ensure Text Remains Visible During Web Font Load’?
Use one of the below tools:
- Google Pagespeed insights (Recommended)
- GTMetrix
- Google Lighthouse
- ChromeDevTools
- Pingdom
Below is the screen using GSI
What are Web Fonts?
The look of a page can be enhanced by using fonts other than the system fonts. Such fonts are known as web fonts: examples include Arial, Helvetica, and Georgia. They are usually hosted on a web server or on the server of a font provider. During page rendering, web fonts are applied to the text by the browser.
What is @font-face?
The @font-face rule is added in the stylesheet and will result in a browser downloading custom fonts. Fonts have extensions like WOFF2, WOFF, TTF,EOT etc.
How to handle fonts-The Methods are defined here
Font-display: Swap
The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.
The font-display property defines how font files are loaded and displayed by the browser. It is applied to the @font-face rule which defines custom fonts in a stylesheet.
Example Before
@font-face {
font-family: ‘Pacifico’;
font-style: normal;
font-weight: 400;
src: local(‘Pacifico Regular’), local(‘Pacifico-Regular’),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H 6MmBp0u-.woff2) format(‘woff2’);
}Recommended CSS
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H 6MmBp0u-.woff2) format('woff2');
font-display: swap;
}You will check that in the recommended
Css Property- font-display: swap;It is tells the browser to use the fallback font to display the text until the custom font has fully downloaded.
Google Fonts
When using google fonts, you can use the
font-display: swap method with a simple ”&;display-swap” in the stylesheet or embed code.Example
<link href =”https://fonts.googleapis.com/css?family=Roboto:400,700″rel=”stylesheet”>
After
<link href =”https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap”rel=”stylesheet”>
You should preload web fonts if you want to use a specific font instead of swap – Preload for Web Fonts
By adding the following link tag to your HTML header, you may preload web fonts that are instantly required during page load
<link rel=”preload”href=”/webfontname”as=”font”type=”font/format”crossorigin>
