<head>tag – instead of the Google Fonts snippet:
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
a CSS feature that helps to configure that behavior. For example,
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
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.
The generated code snippet:
The snippet should work fine in older browsers. It uses
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.
The snippet tries to be as lightweight as possible. To achieve performance
similar to the original
<link rel="stylesheet">, this
<link rel="preload">tag for the stylesheet so the browser starts downloading it as soon as possible,
<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,
Because the snippet has to use
<link rel="preload" as="fetch"> –
<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.
Do that in the GitHub repo.
If you want to improve your conversion, or have issues with performance, reach us.