Using Font Events to speed up your perceived performance.

I’ve been lucky to work with Mat “Wilto” Marquis from Bocoup on web performance issues around Harvard Business Review, and it has been a blast learning new stuff.

One of the approach that we are taking is that we will be using “Font Events” approach to avoid “FOIT” (Flash of Invisible Text). This is pretty cool.

More info on this in an excellent write up by Scott Jehl: “Font Loading Revisited with Font Events”

TLDR here.

Our current situation: Using good old standard @font-face

The browser registers the font, but the font is not immediately availabe to the browser. FOIT. Each font files could be ~100KB per weight/variation of the font, we have 12 files, about to be 14!

Perceived performance = poor.

After our re-factor is done, each css is actually just referencing fall back font stack, so no FOIT. Contents are rendered and immediately readable in a fall back font. For example, our National fonts will appear as Helvetica or Arial.

We’ll use fontfaceobserver.js to check to see if the fonts have been loaded, then add .fonts-loaded class to html tag as successful callback.

CSS rules will look like this (* this is grossly simplified css, but you get the point)

h1 {
font-family: sans-serif;
}
.fonts-loaded h1 {
font-family: National, sans-serif;
}

Fortunately, using sass’s nesting, this is pretty easy:

h1 {
font-family: sans-serif;
.fonts-loaded & {
font-family: $national-ff;
}
}

On the subsequent request though, I am hoping that server can just add .fonts-loaded class to the html tag. For now, we can bake this right into js/cookie, but eventually we would like to work with backend.

Another thing that Wilto uncovered was Foundation out of the box prefers optimizeLegibility as default text-rendering. Just switching this paragraph setting to optimizeSpeed and headers (i.e h1, h2, h3 etc) to auto, we made almost a full second perceived performance improvement on the slower network. Did not know that made that kind of impact.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>