Skip to content

When it comes to website performance testing fonts can often be overlooked when compared to optimising images for the web or videos.

Optimising fonts for the web can somehow feel a little intimidating (I mean just what is a WOFF file anyway?!). In reality it is quite straightforward to make some big page speed improvements with just a few steps.

In this guide we’ll show you how to optimise your font files and have them loading onto your website in a flash, making it more eco-friendly in the process.

Web font usage stats

  • According to research by the HTTP Archive roughly 80% of websites use Web Fonts.
  • The worlds most popular online font foundry is Google Fonts, hosting around 70% of all web fonts.
  • Google’s most popular font is Roboto with over 3.6 trillion views in 2023!
  • South Korea uses the most data for transferring font files. Languages spoken in the East tend to have larger font files due to the considerably greater number of characters used.

Art direction

One of the key aspects of creating a fast loading, low-carbon web design is limiting the amount of files you need to include. With this in mind, be conscious that each font type (this includes different weights, bold and italic styles) you use requires a different file to load in.

For example, imagine a design made up the following elements:

  • Headings: Noto Serif in bold weight (1 file required)
  • Main navigation: Open Sans in light weight (1 file required)
  • Body copy: Open Sans with regular, including italic style, and bold weights (3 files required)

The above design would require a total of 5 font files. The combined page weight can quickly add up and slow down your load time (meaning your site will use more energy). It’s important to be considerate first of all to the number of different font families you use and the styles of each too.

In the above example, you could reduce the number of font files be using the same font for the headings and body copy, or displaying the navigation text in regular font weight instead of light. Furthermore, you could consider other ways to represent emphasised instead of using a bold font weight or avoid using italicised text in your copywriting.

What is the most optimised web font format?

Performant web fonts should use the modern WOFF2 format.

WOFF2 font files are roughly half the size the older WOFF version and 25% of standard TTF and OTF formats. That’s a big saving with no loss in quality.

Web font packs usually come with a WOFF2 version as standard or if not there are plenty of web font converter tools online such as Font Squirrel.

Subsetting web fonts

Most font files contain many characters (known as glyphs) for different languages used all around the world, including Latin, Greek, Cyrillic.

Subsetting allows you to manually remove sets of glyphs you don’t need. The more glyphs you remove from your font file, the smaller it will become.

Using subsetting (for example, by removing the Greek and Cyrillic glyphs) can reduce the size of your font file by a whopping 90%!

You can manually create subsets of font files using a tool such as the FontSquirrel Font Generator (under the expert settings). Some online font foundries such as Adobe Fonts also allow you to manage your subsets in your web project settings.

Note: Always be sure to check if your font license allows you to use subsetting as it may be considered against the usage restrictions.

Embedding fonts vs hosting locally

Web font libraries such as Google Fonts and Adobe Fonts make it super simple to embed custom fonts into your website with just a few lines of code.

Whilst easy to implement this is not particularly efficient because the files must be pulled in externally when the page first loads. In fact, Google’s own page speed tester can sometimes flag the use of Google fonts for slowing your site down!

Your website will load faster if you store the font file on your web server with the rest of your site rather than pulling it in externally from a third party library.

font-display: swap

When adding a custom font into your website’s CSS file, the font-display attribute tells the web browser what to do while waiting for the font file to load. This is particularly important if your font is being loaded in externally from a third-party library.

Google PageSpeed Insights generally recommends using the font-display: swap to “Ensure text remains visible during webfont load”.

@font-face {
  font-family: "Open Sans";
  src:
    url(/fonts/open-sans.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

The code above demonstrates specifying the font-display setting when loading the font with font-face.

Learn more about the font-swap CSS attribute on Moz.

System fonts are cool again

If all of this sounds like too much work, consider using a system font (such as Arial, Trebuchet and Verdana) which come installed onto most devices and as such do not need to be downloaded!

Once a mainstay of website design (because there were no other options), system fonts became less popular in the 2010s once the arrival of font embedding granted developers access to a wider range of options via services such as Google Font Library.

More recently, the growing awareness of sustainable web design means system fonts have found themselves returning to popularity. Since they don’t need to be downloaded, from a performance perspective they can’t be beat!

body{
	font-family: Arial, sans-serif;
}

In this example, we request to use the devices Arial font or fall back to another sans-serif font in the unlikely event that Arial is not available.

Importantly, system fonts are designed for high readability which often makes they more accessible that their more extravagant counterparts from online font foundries.

Check out our project for the Museum Data Service to see how system fonts can be used on a low-carbon website.

More web font tips

The above tips will all help reduce the size of your font files and make your website more energy-efficient. Here are some more accessibility tips that will help you get into good practices with your web fonts.

  • Visitors should be able to increase the font size within their browser without breaking the layout.
  • Always ensure your design uses a minimum colour contrast ratio between the text and the background.
  • If text appears within an image be sure to include what it says using a descriptive Alt text.

Conclusion

Whilst optimising your fonts may not have the same performance wins as compressing videos for the web or your images, it still plays an important role in reducing the environmental impact of your website.

In this article, we have learnt how to:

  • Limit the number of different font styles you use in your design.
  • Use the modern WOFF2 file format.
  • Use subsetting to remove unused characters from your file (as long as your font license allows you to).
  • Use the font-display:swap CSS attribute to ensure your text is always visible whilst the font file loads.
  • Consider system fonts as they do not need to load in because they are already on your device.

Further reading

beautiful websites,
rooted in good ethics

Back to top Get in touch