Quantcast
Channel: Evan Hahn
Viewing all articles
Browse latest Browse all 29

Using fallback fonts to speed up pageload

0
0

In short: loading extra fonts slows your page down, but it can mean your page doesn't look how you want it to.

We've all seen a site show everything but the text and then fill in the text a few seconds later. That's because the browser is loading a font. But isn't the alternative having crappy fonts?

Here's a snippet of code from my site's CSS:

font-family: Lato, "Segoe UI", Avenir, Ubuntu, Tahoma, Verdana, Helvetica, sans-serif;

My ideal font is Lato, so I specify it. It's likely that you don't have that installed, so I specify some OS-specific fallbacks: Segoe UI on Windows and its phones; Avenir on Mac and iOS; Ubuntu on Ubuntu. Then try Tahoma, Verdana, and Helvetica. If you don't have those, you're probably on Android or some other Linux, in which case the default sans-serif is fine.

This speeds up page load time -- you don't have to do extra HTTP requests to load fonts! I find this especially noticeable on mobile.

The flip-side of this is that you might not have the fonts you want. I have a designer friend who I hope never reads this, because he'll yell at me. To him, the difference between the right font and the almost-right font is the difference between lightning and a lightning bug. Sometimes, loading the perfect font is worth the performance hit.

I don't see a ton of people doing this, so I thought I'd bring it up!


Viewing all articles
Browse latest Browse all 29

Latest Images

Trending Articles





Latest Images