Google Fonts accelerator - 500-byte script that renders Google Fonts 1-3s faster

Hi! I’m Ivan. I run a web-performance consulting agency (PerfPerfPerf), and a common performance issue we encounter with our clients is custom fonts. Google Fonts is a popular source of custom fonts, so we made a tool that solves these performance issues for it! 🙅‍♀️ THE ISSUE. If you use a custom font (like a font from Google Fonts), when someone opens your page, your text will stay invisible until that font is downloaded – or until three seconds pass. (This applies to all modern browsers except Safari.) So if you visit a page from a slow mobile network, you’ll see the page layout and images – but it’ll take three more seconds for the text to show up. This’d hurt user experience – and, potentially, conversion and revenue. 🤔 A FIX (BUT NOT REALLY). With modern browsers, you can override this 3-second delay with the font-display CSS rule (using something like font-display: swap). This works well if you host fonts on your own – but Google Fonts don’t support it. 🚀 THE SOLUTION FOR GOOGLE FONTS. We figured out how to solve it. Turns out, you can load the Google Fonts stylesheet asynchronously, patch it to add the font-display declaration, and insert that stylesheet into the page! So we made a tool that does this, plus a few more optimizations – and helps to render the text a couple of seconds earlier. Here’s the tool: https://googlefonts.3perf.com/. Would love to hear your feedback :)

👍