Optimizing large font files for @font-face

bvynlchwqzs

@font-face font optimization has been to my mind recently. Due to the CSS Off that Unmatched Style is hosting if I’m forced to be honest. Now you may be wondering what I mean by font optimization for @font-face. In this I mean the reduction of the font file size.

For example. Let’s say you have three fonts you need to import into a website. This is a lot of fonts. Together they could be 3MB or more. Normally you import one for headlines and in rare cases one for body text. But, we have three none-the-less.

Cut Out the Unused

To optimize the fonts you need to remove the unused characters from the font files. This can cut your font sizes way down and speed up a sites loading time.

To do this you need to have a font editor. I like to use the free tool FontForge.

Once you have optimized your fonts you will need to make an EOT version for Windows. See the README if you use the Google Code EOT converter.

Learn from Johnathan Snook

Johnathan Snook has an excellent video tutorial on the process. So there is no point in me doing it all over again here. His video is the best.

Get the CSS

Finally, once you have your fonts ready to go hop over to Font Squirrel and Generate your @font-face CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.