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

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:

Your browser doesn't support HTML5 video. Here is a link to the video instead.

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.

font-display: swap

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 thedeclaration to make the browser render the text immediately.

In more details, the generated script:

downloads the Google Fonts stylesheet asynchronously for each visitor,

patches it to insert the font-display: swap declaration,

declaration, and inserts that stylesheet into the document.

See the script source

It works fine in older browsers.

font-display

font-display

window.FontFace

<link> tag

The snippet uses the window.FontFace check to detect if a browser supports. If the browser doesn’t support, or ifis not available, the script falls back to inserting a regular

It cares to avoid unnecessary font jumps.

How does this affect performance? 🏎

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.

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

keeps the whole snippet tiny – right now, it’s just 550 bytes minified and gzipped,

generates a <link rel="preload"> tag for the Google Fonts stylesheet – so the browser starts downloading it even before the snippet runs,

tag for the Google Fonts stylesheet – so the browser starts downloading it even before the snippet runs, generates a <link rel="preconnect"> tag for the domain that serves font files (and <link rel="dns-prefetch"> for older browsers) – so the browser can fetch font files sooner,

tag for the domain that serves font files (and 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.

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.

With 🖤, PerfPerfPerf

© 2019. License: CC BY-SA for the content, MIT for the generated code