When Using Fonts Prioritize Format Load Order

I recently re-designed my website and switched from bloated Avada to lean Genesis. When I was re-designing this site, the Genesis theme was loading Ionicons. I wanted to load the Ionicons locally so I could ultimately combine all my files into a single CSS file. I also wanted to control caching headers and remove an extra unused DNS lookup.

There were some issues with this implementation that I had to address. The Ionicons' CSS file was calling for the .ttf version of the font-files. The issue with this is the .ttf version of the font file is much larger than the .woff or .woff2 version.

TTF: 184.09KB
WOFF: 66.31KB
WOFF2: 51.35KB

Cool! But What Was The Problem?

Great question. The default Ionicons CSS file lists the .ttf version of the font files. Most people assume the browser downloads the smallest version. However, that is not what happens. The browser scan the CSS file for the first supported file type for the website's font files.

This is problematic as most modern browsers support .woff files which are 1/3 the size. The latest versions of many browsers also support .woff2. This saves even more previous bytes and concurrently improving your website's load time.

Interesting I Guess. But What Should I Do?

If you are loading any variations of fonts from your domain, for example Font Awesome, make sure you are loading the @font-face rules as follows. This allows for optimal support and compression.

.eot (Fix for those stuck on Internet Explorer)
.woff2
.woff
.ttf
.svg

Just make sure to include all the same font-face rules and use the most compressed versions of the font files first. By loading the most compressed font files first, you avoid having to download unnecessary bytes of information. You will also keep the widget support in the above approach, so it is a win-win situation no matter what.