Make Google Fonts faster
January 1, 2021
Has it happened to you that when you load a website for a small period of time (in good network conditions) don't see any text? That's a really bad experience right?
Fonts providers like Google Fonts have adopted the latest CSS good practices by applying font-display: swap;
to them. All you need to do is add a &display=swap
query parameter to the url.
https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap
What does swap mean to your fonts?
It's good and bad.
At page load, and meanwhile the browser downloads the resource, your font will fallback to something you already have on your system.
font-family: 'Poppins', sans-serif;
In this case, sans-serif
will be the one applied first, and when Poppins
is successfully downloaded, the browser will "swap" to it.
This is a better experience than not seeing anything at all, but we can improve this by prioritising the font download chain.
Make it better, and then make it faster
By giving some hints to the browser, we can achieve a much better experience:
1. Warm up the font origin.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
2. Make the asynchronous fetch for the CSS file a high priority.
<link rel="preload" as="style" href="[GOOGLE_FONT_URL]&display=swap" />
3. Make a low priority, asynchronous fetch that gets applied to the page only after it's loaded.
<linkrel="stylesheet"href="[GOOGLE_FONT_URL]&display=swap"media="print"onload="this.media='all'"/>
4. Last but not least and unlikely but possible, support users with Javascript disabled.
<noscript><link rel="stylesheet" href="[GOOGLE_FONT_URL]&display=swap" /></noscript>
All together
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" as="style" href="[GOOGLE_FONT_URL]&display=swap" /><linkrel="stylesheet"href="[GOOGLE_FONT_URL]&display=swap"media="print"onload="this.media='all'"/><noscript><link rel="stylesheet" href="[GOOGLE_FONT_URL]&display=swap" /></noscript>
Where [GOOGLE_FONT_URL]
is the font url that Google gives you.
This snippet will make it a high priority to download the font and therefore, it will be applied before.