Fast Fonts for Marketers

Here it is number 8... the eighth article (of ten) for marketers focusing on website speed. I'm an ex-marketer turned developer helping you to identify speed issues with your web pages.

Remember the key reason we're doing this... it's because fast loading web pages stop visitors bouncing off and Google gives you a nice SEO boost.

We've covered a lot of ground so far... including CSS, HTML, Javascript, third party code and more. This time we're taking a deep-dive on fonts.

Fonts can be the bad-boy of web page speed... and often causing issues that are difficult to diagnose.

So let's begin...

An intro to fonts in the context of page load speed

We all love a good font. And the best web designs use fonts to make websites look awesome. They can really lift a website's design. There's massive support out there for great font combinations... even Google have dedicated a service to building and delivering great fonts. I'm sure many of you are using Google Fonts on your own websites.

There are system fonts that are already built into your computer. To quote Google... "A system font, or web safe font, is one that's already assumed to be on the vast majority of user's devices. With no need for a web font to be downloaded."

Brilliant! We don't have to load anything - always a plus for fast loading web pages. Here's a list of web safe fonts that are built-in:

• Arial
• Verdana
• Tahoma
• Trebuchet
• Times New Roman
• Georgia
• Courier
• Brush script
• Impact

Go fill your boots with those!

Hang on... my designs look awful with these fonts - can't I have my own font?

I hear you.

Fortunately, we don't have to use the above fonts. We can load a fonts that are just right, tell our CSS (see article 3) to use them in our styles and off we go. Perfect! There's currently 1691 font families on Google Fonts. Fontastic! [sorry].

Developers load fonts for your website and have a choice of three different font file types.

• .ttf (true type fonts)
• .woff (web open font format)
• .woff2 (a newer version of the above .woff)

But now we're loading fonts and different font types. What we do here can have a massive impact on our page loading speed. There's definitely a wrong and right way.

I've seen web pages gain 10 to 15 on PageSpeed Insights scores with the right font loading strategy.

Your website and fonts

Let's find out how your website handles fonts. You're going to need the Page Size Inspector Chrome extension... make sure you install it and then Pin it to your Chrome toolbar.

After installing, I want you to navigate to your website and then select and run the Page Size Inspector. You'll see in the results that there is a line dedicated to fonts... open that up.

It should look something like this, see image below.

I want you to find out the following things:

• How many fonts are you loading
• What type they are, e.g. .ttf, .woff, .woff2
• How big is each file and what is the total file size for them all
• Where are the fonts coming from - your server (you'll see a domain name - is it yours or someone else)
• Also check whether there is a mention of icons in any of the links or file names

Make sure you note all this down.

Reducing the impact of fonts on web page speed

Now, that you have this all written down. Let's look at the best strategies for ensuring that fonts load quickly.

Download fonts from your server

Fonts can be loaded from the vendor's website (e.g. Google Fonts) or they can be downloaded by your developer and stored on your server. This latter option is the best... third party servers can be inundated with requests and your page load speed doesn't want to be dependent on another server. You may have invested a large amount of your hard-earned revenue on expensive hosting. Only to then be dependent on a slow third party server.

Ensure you have .woff2 version of your fonts

.woff2 is a more compressed version of your .ttf font. Make sure the font that is downloaded is .woff2. For the font Montserrat, that we use on Pendigital, the regular font weight weighs 31kb as a .ttf file. This drops to 13kb as a woff2. So the .woff2 is less than half the size of the .ttf.

Only use what you need

When you download or link to a font, you need to tell the vendor what font weights you'll need. On our site, we use light (300 in weight), regular (400), and bold (700).

Fonts often come with many weights, e.g. 300, 400, 500, 600, 700, 800, 900. Make sure your web page designs only use a max of three (my preference). And only load those shortlisted ones.

I've seen websites downloading all the above font weights, yet the page I'm looking at only uses three weights. What a waste of kilobytes downloaded!

Variable fonts

Variable fonts have been around since 2016. You load a variable font once and it comes with all the weights you need. You can style any text with any font weight.

I don't recommend this approach for two reasons:

• File Size: The Montserrat variable font size is 404kb. Whereas the total weight in kb of fonts for 300, 400 and 700 (the weights we use on Pendigital.co.uk) come to 39kb. BTW, we can make this even smaller - see subsetting below.
• Brand Guidelines: If your brand guidelines specify three weights, then that is what must be used to abide by the guidelines. You don't want someone in your team getting super-creative in a page builder using every weight under-the-sun for a landing page.

Reduce the size of your font file by subsetting

This is an awesome approach. I'm really excited about this one.

Each font file comes bundled with a tonne of characters. From the alphabet, numbers and Latin keyboard characters... all the way through to characters required for many other languages. If you're a UK or British website then it's likely you're not going to need an umlaut.

But when you download a font, that character is coming down - even though you won't use it.

There are tools out there now, that will optimize your fonts. Glyphhanger will scan your website for the characters you use and then take a .ttf file, remove the characters you don't need and then output a .woff2. Thank you to Zach Leatherman (also the creator of the Eleventy static site generator) for this great font tool.

Recently, I used this with a font that was weighing in at 398kb for three .woff2 files. I ran these fonts through Glyphhanger telling it that I wanted to keep all the characters on a standard US keyboard (the client was American).

It reduced the 398kb to just 73kb. Amazing.

Before you embark on this approach; make sure you're allowed to subset your chosen fonts.

Don't go overboard with your design

Wearing my marketing hat... how many fonts and font weights do you need to convert a customer? I mean come on! Cool your designer off if they're coming at you with designs with many fonts and weights. It will certainly add to your page loading speed even with the above optimisations.

Icons - bahhh!

We all love icons, but they can contribute to slow web pages. They can come as an image file (e.g. .svg - see images article). Or they can come as a font. Yes, a font! Think Word doc and Wingbats.

There are some awesome providers out there of font icons, like Font Awesome for example.

I recommend only using their .svg option. I.e. manually downloading an .svg file vs installing the font on your website.

If you install a font icon, then you're loading another font. Possibly stuffed with all sorts of icons that you will never use. So larger than you need. And, often these font icon providers also need you to add a .css file - so yet another server request and more kb to download. Need to know more about CSS, check out our performance article focusing on it.

I've seen websites downloading .ttf files for font icons and there isn't an icon to be seen on their web pages. What a waste of bandwidth.

One more small tip

If you need a special font for a label and it doesn't need to be amended by your content management system or is dynamic. Then consider using an .svg image with the text in it. Here's an example of a share image.

That's all I wanted to cover today. I hope that's been helpful. If you've landed on this page via Google search then make sure you check out my other articles tagged with website performance.

Oh, nearly forgot... hero image animal fact. A hare can run at up to 72kmh... wow. Make sure your website is like a hare.

I'm there to help you make your website faster. Please get in touch if you need a hand. And don't forget to follow us: LinkedIn, Twitter and Facebook.