Custom fonts are often a necessary evil. A need to maintain an overall theme or a continuation of a brands style.

Either way, you or your client requires a specific look and feel for a website which requires that certain fonts be loaded.

There may be many of these font files, each taking a small but precious amount of your webpages load time.

Time is a commodity we are all short on, so lets not waste it loading fonts.

So what can we do to improve our font performance conundrum?

How can we load these fonts faster?

What font file types are best?

Are there any alternatives to loading many custom fonts?

We give you the answers and links to many useful tools, most of which are free.

A quick run down of what we will discuss.

• Often fonts are not necessary. Remove any you are not using.
• Some fonts allow for requesting only the characters that you need – known as subsetting.
• Some fonts are Variable which means one font pack can provide the look and feel of many.
• Font layout shifts – your webpage may look glitchy while loading as elements move around when your font finally loads.
• The best font is no font.
• OTF / TTF / WOFF / WOFF2 / Google Fonts? Which should I use?

Remove Custom Fonts that are not used

Sounds simple but can be a real pain to figure out. The easiest way I have found is to scan everything starting with your CSS files for any mention of the font name in question.

If they appear in your CSS then determine the conditions in which they are utilized. This could be anything from screen dimensions, mobile vs desktop or even conditionally added using JavaScript.

On occasion some developers inline their CSS so after checking the CSS files check your HTML files as well.

If they are never used, then remove them from your website as they are adding extra weight to your webpages and slowing you down.

This is especially notable on devices where network speed is usually limited.

For Best Performance Do Not Use Custom Fonts.

Yuck, what are you talking about? Well, browsers have default fonts, and they are not all that bad…no I’m kidding, they are bad. But, they are already loaded with the browser so don’t need to be fetched. This translates to time savings.

Browser fonts are what browser will render should you not provide an alternative in your HTML or CSS files.

To view the list of these browser default fonts, see here: https://www.w3.org/TR/CSS21/fonts.html#generic-font-families

Font File Types

This is going to be painfully blunt. You should use the WOFF2 format.

If you are providing your own custom font file or sourcing your custom font file from another website, then you should be aiming to receive the WOFF2 format.

OTF and TTF are older file formats that are not compressed and as such are larger files not technically bred for the web.

WOFF and WOFF2 on the other hand were specifically designed for browser use.

So if you want the best performance from your custom font files then this is a good first step.

Why WOFF2?

WOFF2 is highly compressed, sometimes up to 30% more compression than the same font in WOFF format.

If you need a font file for your website at all then this should be the go-to.

Here is an example of Font file types and their relative size comparisons for the font OpenSans-Regular.

Type	File Size
.OTF	134KB
.TTF	95KB
.WOF	59KB
.WOFF2	44KB

So in this case, between OTF and WOFF2 there is a 67.2% drop in file size.

Google Fonts – What format are they in?

When you request a Google Font, Google will determine what browser you are using and what font file types it can handle.

Then Google will serve you the most efficient version of that font file that it can.

So, if your browser supports WOFF2 then you will receive a WOFF2 file.

How to load only a subset of Characters from your font

Let me just preface this with -Not all fonts can do this.

Google font requests certainly can, and this is how:

Say we only want the letters in our title to be in Roboto Font. The request would look like this:

<link href="http://fonts.googleapis.com/css?family=Roboto&text=CustomFonts–BestPracticesforimprovingyourwebpageloadingspeed" rel="stylesheet">

We could improve this request be removing all duplicate characters. i.e.

<link href="http://fonts.googleapis.com/css?family=Roboto&text=CustomFn–BePracifpvgyuwbld" rel="stylesheet">

This will serve back to us only these characters from the Roboto Font “CustomFn–BePracifpvgywbld”.

Here are some relative statistics for these requests.

Subsetted Font Request

<link href="http://fonts.googleapis.com/css?family=Roboto&text=CustomFn–BePracifpvgywbld" rel="stylesheet">

155ms	Transfer time
250B	File Request size
4.2kB	Font File size
134ms	Font File Download Time
4.45kB	Total Transfer Size
289ms	Total Request Time

Full Font Request

<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

152ms	Request Transfer time
536B	Request size
15.9kB	Font File size
177ms	Font File Download Time
16.44kB	Total Transfer Size
329ms	Total Request Time

As you can see the subsetted font file is much smaller at a quarter of the full size and loaded 13% faster.

What if I don’t use Google Fonts

Well another way you could do this is to use a tool like Font Squirrel here https://www.fontsquirrel.com/tools/webfont-generator.

Load your font file, select which characters you want from that font file and download your new subsetted font file.  

Variable Fonts

Variable fonts are relatively new and while most browsers support them, they are not very widely understood or adopted.

A Variable Font is a font that can change depending on their CSS attributes. It is a font file that stores a continuous range of design variants. For examples of what they can achieve see here https://v-fonts.com/.

A single font file can produce essentially an unlimited amount of variance.

Sounds great but what’s the catch?

Well apart from only 93% of browsers supporting them as of the writing of this article, see https://caniuse.com/?search=variable%20fonts, the files can be double or triple the size of a conventional font file.

So why would I use a Variable Font?

Your website may currently use many fonts that require being loaded from file or from outside sources. A Variable Font could possibly do the job of all your fonts combined as a single file.

This could mean your web pages load faster as they are not waiting on multiple files to load.

Sounds great but you said Variable Fonts are larger files

But there are ways to fix the file size issue. We can simply request the letters and or numbers that we want from the file which can significantly reduce the file size and we can request the file in WOFF2 format which can drop the file size further.

Remember that these font files also contain hundreds of characters you will probably never use.

As a quick example of this, on your windows desktop type in the search bar “Character Map” and open the Character Map tool.

At the top of the tool choose a font to examine and then scroll down through all of the fonts available characters.

By stripping your font pack of these extra characters, you can reduce its size down to 10% or even less of its original size!

Are Variable Fonts free? Where do I get them?

Some Variable fonts cannot be used unless purchased but there are many free Variable fonts online for you to try. Here are some sites I have discovered with free Variable fonts:

https://fontesk.com/tag/variable/?license=free-for-commercial-use

https://fontsarena.com/tag/variable-font/

https://fonts.google.com/variablefonts#font-families

Custom Font layout shifts

When a browser loads a webpage unless it is told not to by CSS it will display text initially in its default font.

Here is a list of browsers and their relative default fonts.

However, if CSS exists and the font-family is specified then it may end up loading a fall-back font while your custom fonts are still loading.

i.e.

html {
    font-family: Roboto, Tahoma, Sans-Serif;
}

(Try and load font Roboto – if it does not exist then load Tahoma – if that does not exist then load Sans-Serif)

In this example Roboto is a Google Font which will take time to load. Should this font not load in time for the webpage to display text in this font then try and load the fallback fonts – Tahoma and lastly Sans-Serif.

Following this, and only once your custom fonts (in this case Roboto) has loaded, the page will render text in the fonts you have specified.

What is the downside here?

We have one default browser font, or a CSS fall back font swapping out for a custom font. Surely nothing can go wrong.

Well as the title of this section suggests the layout can shift.

Your webpage will potentially load with the default fonts and display this to the user.

These default fonts will have certain sizes that may push or shrink the bounds of their containers making the webpage layout a different shape to what it will inevitably look like once your custom font loads.

This causes a short screen flash and your content moving around on the screen which can be annoying or confusing to your reader.

So how can we combat layout shifts?

We could make our fallback fonts look as close as possible to the custom fonts.

There are many free online tools to do this. We tried this one from meowni.ca which was excellent.

https://meowni.ca/font-style-matcher/

We could also not use any custom fonts. This would allow the browser to render fonts faster with no layout shifts at all. Not the greatest option, but an option none the less.

Preload Fonts.

Another method to help with layout shifts is to preload your custom fonts. This causes the custom fonts to load before the main html and CSS portions are rendered.

i.e.

<link rel=preload href=https://fonts.googleapis.com >

Finally we have font:display in our arsenal.

You can minimize these layout shift effects by using font:display values like auto, swap, block, fallback and optional.

Css Tricks has a wonderful article on what each of these attributes achieve here.       

For more Best Practices

Best practices for Lazy Loading Images see here https://processit.co.nz/blog/2021/07/lazy-loading-images-new-html-attribute-loading-lazy/

Best Practices for improving webpage loading speeds see here https://processit.co.nz/blog/2021/06/squeeze-more-performance-out-of-your-webpages/

How to add Facebook Messenger to your webpages see here https://processit.co.nz/blog/2021/02/learn-how-to-add-facebook-messenger-live-chat-to-your-website/

For information about our company ProcessIT and our Custom Software Solutions see here https://processit.co.nz