Stop Typekit Fonts Appearing Until They’re Loaded

This is a simple little trick that fixes a major annoyance for me. Most websites using Typekit fonts take a second or so longer to load — and before they’re fully loaded, any underlined areas show up incorrectly for moment.

It’s hard to notice on the desktop, but much more obvious on mobile. This simple piece of CSS code hides all text that’s using a Typekit font (so all text on Chasing Perfection), until the typeface is loaded.

The specific CSS code I added to my CSS here is as follows:

.wf-loading {
    visibility: hidden;
}
.wf-active {
    visibility: visible;
}

Check out Typekit’s guide before trying this on your own site, but it’s fairly simple to implement and solves a little annoyance.