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.


@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.


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