Deprecated

We created this tool in Feb 2019 to help developers load Google Fonts as if it supported font-display. But very soon, in May 2019, Google Fonts rolled out built-in font-display support – which is great!

So today, while this tool still works just file, there’s no much sense to use it over the native feature.

To use font-display in Google Fonts natively, just append &display=swap (or another value) to the end of your Google Fonts url: https://fonts.googleapis.com/css?family=Fira+Mono|Montserrat&display=swap

Make your Google Fonts render faster 🚀

  1. 1️⃣ Choose the fonts you need on Google Fonts.
  2. 2️⃣ Copy a link to the Google Fonts stylesheet – or just the code they provide – and paste it below:
  3. 3️⃣ Copy the resulting code and insert it into your <head> tag – instead of the Google Fonts snippet:

  4. 4️⃣ Subscribe to the GitHub repository to learn about important updates to the script: Watch

What is this? 🧐

When you use a custom font (like a font from Google Fonts), most modern browsers don’t render the text immediately. Instead, they keep the text hidden until the font is downloaded (or until 3 seconds pass). If a user opens a page with a custom font from a slow connection (e.g., from mobile), it will look like this:

This hurts user experience – and affects business metrics.

This tools wraps Google Fonts and makes the text render immediately (with a fallback font). The custom font is downloaded asynchronously and applied later:

How does this work? 

It uses font-display under the hood.

In 2017-2018, most browsers released support for font-display, a CSS feature that helps to configure how custom fonts are loaded. However, Google Fonts don’t support font-display natively! This tool works around that and adds the font-display: swap declaration to make the browser render the text immediately.

In more details, the generated script:

See the script source

It works fine in older browsers.

The snippet 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.

It cares to avoid 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? 🏎

We built the snippet to be as lightweight as possible. To achieve a great performance, this tool:

Where do I report issues? 🙋‍

Do that in the GitHub repo.

Who are you? 

We are PerfPerfPerf. We help companies to make web apps faster and earn more.

We worked with Google and various e-commerce and media companies. Here’s a feedback from one of them:

Ivan [the PerfPerfPerf founder] gave a ton of extremely useful, actionable feedback that directly improved our First Meaningful Paint, Time to Interactive, Speed Index, First CPU Idle metrics significantly. Also, he helped with some bundle size optimization too.

Interaction with Ivan is dense in terms of knowledge transfer, and I guarantee you that you will learn a lot of new things. On top of all these, he’s a super smooth person to work with. All in all, I cannot recommend Ivan enough!

Cihat Imamoglu, Senior Software Engineer @ Fat Llama

Want to improve conversion, or have issues with performance? Chat with us.