Speed up WordPress: How to make your site load faster by self-hosting fonts

Update: Since the time this article was first written, Google Fonts interface has changed and the gauge described below is nowhere to be found.

I'm a typography junkie. Not that I'm any good at it. But I can sure appreciate excellent typography when I see it. The right typography creates the right "selling atmosphere" for your product or service as every good designer will tell you.

Most of us use web fonts from Google, Typekit, etc. Used in moderation, they hardly have any bearing on how fast your site loads. However, while optimizing client's sites for speed I often see a whole plethora of fonts in use and that does have a negative effect.

If you're using Google fonts and wondering how they affect your site, there's a handy tool from Google that will give you a clue. Go to https://www.google.com/fonts, pick out the fonts you're using on your site and use the blue "Add to Collection" button for each one. Once you've added all of them, press the "Use" button at the bottom right. On the next screen you'll see the styles for each of your fonts, go ahead and check the appropriate boxes. The gauge on the right will show you how you're doing as far as page load.

If you're not doing great according to the gauge but must keep all of your fonts, you can host some or all of them on your server and use @font-face css in your child theme stylesheet. Please google how it's done, there are a ton of great articles on the subject. If you decide to take this route to cut down on font requests, or if you'd like to embed some fonts that are not available from Google or another place, there's a great site that will help you convert your font files into all formats needed for all browsers and will also give you the CSS to use. http://font2web.com/

Please keep in mind that not all fonts were created equal. Some won't look as good as web fonts when self-hosted, especially in smaller size. You may have to play around with them using CSS.

In the very near future I’ll be adding a video to my WordPress Speed Secrets tutorial, in which I’ll walk you step-by-step through the process of self-hosting fonts for a better looking and a faster site.

Was this article useful? If so, please share it.