FOUT Fix While Using Typekit and Cloudflare

Designers and developers can incorporate custom fonts into their websites instead of just using web safe fonts that are installed on a visitors computer. Those default fonts are boring and they vary on different operating systems. They are never really the same and that’s why there is something called a font stack.

Custom web fonts have actually been around for longer than most people think.

There are a handful of custom web font solutions you can go with. However, 90% of people go with @font-face because it’s the easiest and most versatile. There are many others that Chris explains in the previous link that might better suite your needs.

@font-face is a CSS rule that downloads the font you specify to use from your server and have it render on your webpage. There are many different places to get @font-face files including the free service Google Fonts, but today we’ll be talking about Typekit’s premium service.

Typekit is a subscription font service from Adobe. It brings thousands of fonts from their type foundry partners into their library. They are one of the premier places to get fonts and inspiration from. If you use the Creative Cloud from Adobe, TypeKit is included with your subscription! There is one small but easily fixable problem… when a visitor comes to your site, the custom fonts will flash once or twice while they are loaded. This is called FOUT.

What Is FOUT?

This is an acronym for Flash of Unstyled Text. It happens when you load fonts from third parties onto your website. There is an easy FOUT fix while using Typekit and Cloudflare, but let’s go through what happens first.

When you visit a site, it will start to load from the top down. Your text will load super fast, but it has to download the font files from the third party and then render your text to use that font file. This results in a quick flash or two while the font changes from a default, web safe font to your custom @font-face.

It happens with TypeKit and we are going to fix it.

Easy FOUT Fix

TypeKit has a blog post on how to fix FOUT but this only helps people who aren’t using a content delivery network or CDN. Here’s their solution:

FOUT Fix While Using Typekit and Cloudflare

The code snippet above will not work if you are using Cloudflare and their Rocket Loader functionality.

If you aren’t using Cloudflare, you should be. It will make your website fast. They have a free plan. Do it.

Anyway, if you’re using Clouflare, you know that it caches and delivers your website assets from their speedy networks. It is doing this for Typekit scripts as well. Unfortunately, this is the reason why the above script will not work. We need to stop that.

What we are doing here is simply adding the data-cfasync=”false” attribute. This is telling Cloudflare/Rocket Loader to ignore these scripts. There are a couple of important points:

• The data-cfasync=”false” attribute must be added before the src attribute.
• You can use single or double quotes if you’d like. I personally use double quotes. They look better and give better visual ques.

You’re no longer stuck in the early 90’s. Enjoy your non-flashing text.

---