WEB FONTS. How They Affect Your Site’s Speed And What You Can Do About It

WEB FONTS. How They Affect Your Site’s Speed And What You Can Do About It

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.

In X we have a great tool that allows us to create excellent typography. You’ll find it in Customizer.

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.
2016-06-14 07_19_27-Google FontsIf 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 embed some of them on your site using @font-face css in your child theme stylesheet. Just 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 embedded, especially in smaller size. You may have to play around with them using CSS or the fabulous X typography tool in Customizer.

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 embedding fonts for a better looking and faster site.

You can find Alexei’s full WordPress Speed Secrets video tutorial here.

By Alexei Kutsko —
Founder at WP Speed Guru and author of WordPress Speed Secrets.

WPSG-190x60

2 Comments on “WEB FONTS. How They Affect Your Site’s Speed And What You Can Do About It”

Leave a Reply

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