Gradually loading web fonts.
Create fallback web fonts to protect contents from jumping during initial page load.
The idea is that text rendered using placeholder fonts remains hidden while taking up exactly the same amount of space as when the original web font is used, so once it finishes loading and the text gets rendered with a new font, not a single pixel gets shifted.
This is a purely HTML+CSS approach to combating FOUT.
Within the example directory you’ll find a basic demo. Don’t open index.html directly, but rather run make demo and then open http://localhost:5703.
npm i -g invisible-ink
invisible-ink My-Font-Name.ttf > output.css- Change all
in your code to
font-family: "My Font Name", …;
font-family: "My Font Name", "My Font Name Placeholder", …;
- Add this CSS rule:
and this HTML code:
#invisible-ink { font-family: "My Font Name Placeholder"; }
to your page.<span id="invisible-ink"></span>
- Prepend contents of
output.cssto your project’s CSS codebase. - Get rid of
output.css
Web fonts get loaded asynchronously. The good news is that it doesn’t block the rest of the page from being loaded (unlike JavaScript). The bad news is that there’s always a chance that the CDN where your favorite font lives is just not as fast as you’d like it to be, and the font available on your system will take up different amount of space than the specified web font, when it loads.
This’s more of a proof of concept than a final piece of software. In an ideal world there should be a Webpack plug-in to do all this automatically.
Sample font “Alex Brush” used for the demo was designed by Robert E. Leuschke.
All photos shown on the demo’s pages were obtained from Pexels and are in the public domain along with the text by H.P. Lovecraft.
To the extent possible under law, the author(s) have dedicated all copyright related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.