Make your Google Fonts render faster

Choose the fonts you need on Google Fonts.
Copy a link to the Google Fonts stylesheet – or just the code they provide – and paste it below:
Copy the resulting code and insert it into your <head> tag – instead of the Google Fonts snippet:
Subscribe to the GitHub repository to learn about important updates to the script:

What is this?

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 font-display declaration,
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 <link> tag.

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?

We are PerfPerfPerf. We help companies make their apps and sites faster and earn more. We worked with Google and a bunch of e-commerce and media companies (here’re some cases).

If you want to improve your conversion, or have issues with performance, reach us.