
500-byte script that makes Google Fonts render faster (up to 3s in slow network) - iamakulov
http://3perf.com/
======
iamakulov
So, a couple months ago, I discovered a way to make a text that uses Google
Fonts render faster. In slow connections, that might give a boost of 1-3
seconds. Recently, I released that as a tool.

Here’re more details:

— When you use custom fonts (like Google Fonts), most modern browsers won’t
render the text with that font immediately. Instead, the text will stay
invisible until the font is downloaded – or until 3 seconds pass. You might’ve
experienced this yourself if you have an Android phone. This is done to
prevent a FOIT (flash of invisible text), but this hurts user experience.

— A typical solution for this is to add a CSS rule like _font-display: swap_
which tells the browser to avoid waiting for the custom font. However, Google
Fonts don’t support this rule, and the only remaining solution becomes to a)
self-host fonts (more hassle; impossible in some environments) or b) use JS
libraries like Typekit Webfont Loader (hurts the initial font load time)

— Recently, I found a solution for this. Turns out, you can fetch a Google
Fonts stylesheet asynchronously, patch it to include font-display, and insert
it into the page. So I composed a tool that does it! The tool generates an
inline script that does the work + a few _< link rel="preload/preconnect">_
tags to avoid hurting the performance. The script also does some extra work to
avoid unnecessary FOUTs. The total size of the generated code snippet is 550
bytes minified + gzipped.

Here’s the source code of the generated script:
[https://github.com/iamakulov/googlefonts-font-display-
helper...](https://github.com/iamakulov/googlefonts-font-display-
helper/blob/master/src/script.js)

Would love your feedback on the tool :)

