So, a few weeks 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. Some backstory:
* 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 had an Android phone and used a slow connection once). This is done to prevent a FOIT, 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 (annoying)
b) use JS libraries like Web Font Loader (hurts the initial font load time; pretty complicated for one task)
* 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 project that does it! To avoid hurting the performance, the project generates an inline script and a few `<link rel="preload/preconnect">` tags. The script also does some extra work to avoid unnecessary FOUTs. The total size of the code snippet is 550 bytes minified and gzipped.
* 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 had an Android phone and used a slow connection once). This is done to prevent a FOIT, 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 (annoying) b) use JS libraries like Web Font Loader (hurts the initial font load time; pretty complicated for one task)
* 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 project that does it! To avoid hurting the performance, the project generates an inline script and a few `<link rel="preload/preconnect">` tags. The script also does some extra work to avoid unnecessary FOUTs. The total size of the code snippet is 550 bytes minified and gzipped.
Here’s the primary source code of the script: https://github.com/iamakulov/googlefonts-font-display-helper...
Would love your feedback on the tool :)