When you use a custom font (like a font from Google Fonts), most modern browsers won’t render the text immediately. Instead, they will keep the text hidden until the font is downloaded – or until 3 seconds pass. If a user opens a page with such font from a slow connection (e.g. from mobile), it will look like this:
This hurts user experience – and affects business metrics.
In 2017-2018, most browsers released support for
font-display, a CSS feature that helps to configure that behavior. For example, with
font-display: swap, the text is rendered immediately using a fallback font. Then, when a custom font is downloaded, the text is re-rendered in that font.
Unfortunately, Google Fonts don’t support
font-display natively, so you can’t apply this optimization to them. This tool generates a small wrapper around Google Fonts that adds
font-display support and helps to render text quicker.
How does this work?
The generated code snippet:
- downloads the Google Fonts stylesheet asynchronously,
- patches it to insert the
- and inserts that stylesheet into the document.
The snippet should work fine in older browsers. It uses the
window.FontFace check to detect if a browser supports
font-display. If the browser doesn’t support
font-display, or if
window.FontFace is not available, the script falls back to inserting a regular
The snippet doesn’t cause unnecessary font jumps. If the Google Fonts stylesheet is already cached, the script will insert it into the document synchronously – so that the browser can apply custom fonts immediately.
How does this affect performance?
The snippet tries to be as lightweight as possible. To achieve performance similar to the original
<link rel="stylesheet">, this snippet generator:
- generates a
<link rel="preload">tag for the stylesheet so the browser starts downloading it as soon as possible,
- generates a
<link rel="preconnect">tag for the domain font files are loaded from (and
<link rel="dns-prefetch">for older browsers) – so the browser can fetch font files sooner,
- and provides an inline script instead of an external one – to avoid making an extra HTTP request
Because the snippet has to use
<link rel="preload" as="fetch"> – and not
<link rel="preload" as="style"> – in Chrome, the stylesheet’s priority will be one level lower, and it might start downloading slightly later. However, overall, the performance effect is positive – because the Google Fonts stylesheet doesn’t block the page anymore, and fonts display immediately.
Where do I report issues?
Do that in the GitHub repo.
Who are you?
If you want to improve your conversion, or have issues with performance, reach us.