WP FOFT Loader Tutorial Ep. 1 | Introducing the WP FOFT Loader WordPress Plugin.
Welcome to configuring the WP FOFT Loader
WordPress plugin part 1. This introductory tutorial explains the
background, purpose, and benefits of using the plugin. If you prefer to dirty your
hands and learn how to start using the plugin, skip to part 2. So what is the
problem we’re trying to solve? Unlike when I started building websites 20
years ago, it’s relatively easy to implement fancy typography on a website.
But those pretty fonts come at a cost. According to the Filament Group’s Zach
Leatherman in his webinar “The Five Whys of Web Font Loading Performance,” a default
WordPress website comprising five hundred and ninety five kilobytes
requires 35 requests for the browser. To fetch of those requests, 5 are for fonts
of the 595 kilobyte weight 100 kilobytes 17% our web fonts. That’s more than the
CSS and HTML combined. Beyond the payload size, web fonts present other problems.
The first is the flash of invisible text or FOIT. that’s the default browser
behavior of keeping the text invisible while loading. If you’ve ever stared at a
blank page waiting for something to show up, you’ve experienced FOIT. The next
problem is the flash of unstyled text or FOUT. Most modern browsers keep text
invisible for about 3 seconds before displaying it in a system font if the
web font hasn’t finished loading. While this is better than FOIT, it can cause
the page to jump when the web font finishes loading and takes the system
font’s place. This phenomenon of the text suddenly being redrawn is called reflow.
FOFT or flash of faux text is preferable to either of these but
requires some configuration. With FOFT, we render a roman font first, then use
font-synthesis to render faux bold and italic variations immediately. When the
web fonts finish loading the faux style variations are replaced with their true
counterparts. Leatherman’s excellent article, “A Comprehensive Guide
to Font-Loading Strategies,” outlines numerous strategies to deal with these
issues. Currently the pick of the litter is Critical FOFT with data URI. In
Critical FOFT, we load a subsetted roman font containing only numerals and
letters. We embed the subset directly in the markup as a base 64 encoded string.
On the first visit the browser displays the subset (that’s our FOFT) while it
tell the browser whether the full fonts are in cache so it can load them
immediately on a repeat view. Critical FOFT with data URI isn’t the last word
in font-loading strategies. It’s difficult for someone without a
technical background to implement and it may become obsolete once all the major
browsers support the font-displays CSS property. At this time
Internet Explorer, Microsoft Edge and Firefox are the holdouts. In the meantime
our little plugin is here to help. By implementing critical FOFT with
data URI without requiring any editing or alteration of wordpress files anyone
capable of following the basic directions can improve their website’s
performance and improve their users’ experience through better web typography.
See you next time.