Preventing the Performance Hit from Custom Fonts

The issues are:

1) custom fonts are awesome and we want to use them

2) custom fonts slow down our pages by being large additional resources.

I did a google search for  @ font face and got 121,000,000 hits!

If you use @font-face but don’t ever apply that font-family, the font won’t be downloaded. Pretty smart, browsers.

From http://www.font-face.com/#lime_content:

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that web designers will no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer.

Some browsers support @font-face, some do not. The latest versions of Safari and Firefox and Google Chrome support @font-face and Opera is planning to support it soon.

Commentary:

These are not shiny and flashy web pages, but are very interesting if someone is going to create web pages!

Otherwise, it’s really boring.

@ font face.com

Advertisements