If you have ran a diagnostic on your blog or webpage load, you are familiar with this message –
Ensure text remains visible during webfont load
Ok, you say to yourself, why isn’t my text visible? What is blocking it from the viewport?
FOIT is blocking it, my friend. What is FOIT you may wonder?
Hold on to your hats, FOIT is a slithery, stealthy and silent invader …
Flash of Invisible Text
Yes, your text, in an instant (of the human eye) … an eternity in the computer world, enters the screen … invisibly.
What the frankennoodle???
Have we been inducted into a spy agency with supplies of invisible ink? No, no … (or have we????)
Well let’s get to the issue – font files are
H….U….G….E
no exaggeration, and of course they have to load first right? So, what does your viewer see while these enormous files are loading? I would prefer we all see kittens and puppies with lollypops but sadly no, What we see are options like jerky screens, half images or at its worst a white screen of impending eeek!
Alright so now we know what it is, and we know we don’t want it … now, if we have it … how do we get rid of it?
Put on your safari site hats and let’s go!
We need to lay down the rules …
“The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)” (from our friends at Web.dev) Preload web fonts #
Use to fetch your font files earlier.”
Pretty cool, right? The preceding helps us with communicate to the “wild animals” that we are not their enemy, that if they want to talk with us, they no need to use this language … (i.e. the font you want rendered.) But what about that stealthy FOIT? The proceeding is the answer …
From the internet guide book written by the all time adventurer GOOGLE himself we have this excerpt –
“The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
****** DO NOT COPY and INSERT - THIS LINE or BELOW ******
AND THERE YOU HAVE IT !
INTERNET SAFARI SUCCESS !!
Sláinte!
