Summary
Optimising fonts is one of the least known ways of speeding up a slow website. For your WordPress website to deliver results, it needs to be as fast as possible for visitors. This article provides a guide to optimising fonts to help you maintain a faster, more sustainable WordPress website.
What you will learn
- Summary
- Why is it essential to optimise your website’s fonts?
- How do fonts affect website speed and increase your carbon footprint?
- Understanding the different types of fonts
- Choosing fonts
- What’s the optimal format for your website’s fonts?
- Font optimisation for your website
- Using WordPress plugins to optimise fonts
- The benefits of optimising fonts on your WordPress website
Why is it essential to optimise your website’s fonts?
All the design elements that make up your WordPress website – such as images and videos – can slow it down.
However, just like with your media files, using website fonts without following best practices for optimisation can slow down your site’s speed and increase the amount of data and carbon footprint.
How do fonts affect website speed and increase your carbon footprint?
Fonts exist within the code of your website as files uploaded to your website’s server or downloaded from a third-party host like Google or Typekit and then used by the browser.
Each font you use requires a different file to be loaded on the page. More files are needed if your website uses different fonts and font weights.
Those website font files are made up of data, and that data is how the web pages of your site are presented to visitors in their browsers.
Each byte of data adds to your web pages’ “page weight.” The larger the page weight, the slower your pages will take to load for your visitors. But a higher page weight won’t just result in a slow website that could frustrate visitors, either. It will also increase the amount of energy and electricity required to transmit that data from your servers to your visitors’ devices. That greater use of energy adds to your website’s overall carbon footprint.
Understanding the different types of fonts
Website fonts mostly come in three categories:
Web-safe fonts
Web-safe fonts are the basic fonts that are pre-programmed into your visitors’ devices and operating systems. So, the browser doesn’t need to download the font files and styles as they are already on the user’s machine.
It is important only to use fonts which are common across different operating systems:
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Impact (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Courier (monospace)
- Brush Script MT (cursive)
Since these fonts already exist on your visitors’ devices and require no loading, their speed and performance are the best. The downside is that, from a design perspective, these fonts are quite basic.
Web fonts
Web fonts don’t usually exist on your visitors’ devices or operating systems but are downloaded from a web server to be used on your web pages. The most common source of these web fonts is Google.
Web fonts are the most popular approach, making up around 80% of fonts used on all desktop sites. That’s often because they offer greater stylistic choices while ensuring your website looks the same across all devices and operating systems.
Not only are these fonts slower to load than default fonts, they’re also dependent on the third-party servers to load them reliably for all visitors.
Custom fonts
Custom fonts are, as you’d expect, custom-designed fonts that you either build yourself or purchase a licence from a provider.
While the obvious design and style benefits are the main drivers for using custom fonts, they can significantly increase your page weight and slow down your website if loaded from a third-party website.
Custom fonts typically have the largest file sizes, requiring the most data to render on a page and should always be self-hosted.
Choosing fonts
There’s a range of particularly eco-friendly, well-optimised fonts to choose from these days, such as:
Times New Eco can reduce printing energy consumption by 15% compared to traditional serif fonts.
- Times New Eco: a new version of the classic Times New Roman font, optimised to use less energy and improve readability.
- Open Sans: a popular, versatile sans-serif font with great readability across many screen sizes. This font has a simple, clean appearance and requires less energy to render compared to more elaborate fonts.
- Calibri Light: a slender, modern font with a lightweight design that requires less processing power to render, making it an energy-efficient choice for your website.
- EcoFont: aiming to reduce ink and toner usage in printed materials. The font features small holes within each character, allowing for ink-efficient printing without compromising readability.
What’s the optimal format for your website’s fonts?
The best format to optimise your fonts is WOFF2 (Web Open Font Format, version 2). All modern browsers support WOFF2 and this uses Brotli compression, whereas version 1 uses GZIP.
WOFF2 format has, on average, a 26.61% higher compression than WOFF1
If you download a font in another format, such as TrueType Font (TTF), Embedded OpenType (EOT), OpenType Font (OTF) or WOFF1, then you should convert your font files to .woff2
format, using a tool such as CloudConvert’s WOFF2 Converter.
Font optimisation for your website
Here are some key tips for optimising your fonts to improve your site’s speed and reduce its carbon footprint.
Limit web font usage to two font families
When incorporating custom typography into your website’s design, limiting the number of web font families to two per page is important.
You shouldn’t need more than two fonts (one for headings, one for body text).
Using more than two fonts can lead to slower loading times and increased page weight, negatively impacting your site’s overall performance. Page rendering is often blocked until all the font files are downloaded, so keeping to two fonts will ensure a faster and smoother user experience.
Host your web fonts locally
To boost your website’s speed, consider hosting web fonts directly on your hosting server, also known as self-hosting.
To self-host fonts, follow these steps:
- Upload the font file(s) to your server.
- Add the necessary
@font-face
declarations to your CSS
The performance benefits of self-hosting web fonts include:
- Avoiding connections to third-party servers, can reduce Time to First Byte (TTFB). For example, using Google Fonts requires external connections for both font files and CSS.
- You can fine-tune your
@font-face
rules to improve efficiency further. - Fonts can be delivered through a content delivery network (CDN).
Another key benefit of self-hosting fonts is improved privacy, as your visitor’s IP address isn’t shared with external providers. In the EU this is required to meet GDPR requirements.
Hosting Adobe fonts
Adobe Fonts typically cannot be self hosted directly, however many of their fonts can be purchased from party providers (called type foundries).
You can self-host some of these fonts if the third-party provider allows it in their license.
Hosting Google fonts
To easiest way to add self-hosted Google Fonts to your website is using the Google Web Fonts Helper tool to create the necessary CSS @font-face
rules, plus the font files in WOFF2 format.
First, choose the font, for example, Open Sans…
1/ Select the charset
2/ Select the font styles
3/ Copy the CSS
4/ Download the font files
These files can be unzipped and uploaded to your hosting server. You can also copy the @font-face
rules that you’ll need to add to your CSS.
Subsetting fonts
Use subsetting to remove unnecessary characters, such as “glyphs,” which are only there to translate your text into other languages.
Subset files: Only select the character sets you require, for example when you select the character sets Greek and Latin sets in Google Web Fonts Helper, it generates a subsetted font file that does not include Cyrillic and extended Latin.
Unicode-range: The unicode-range
descriptor allows you to specify the characters you want to use from a particular font file. If the HTML doesn’t include any of the characters defined by unicode-range
, then the font file won’t download.
Set cache headers for font files
To set efficient cache headers for your font files, you can minimize repeated downloads by leveraging HTTP caching.
- Set long cache durations: Font files typically don’t change frequently, so you can set a long cache expiration time. Use the
Cache-Control
header with a directive likepublic, max-age=31536000
(one year in seconds) to allow browsers to cache the font files for an extended period. - Use ETag and Last-Modified headers: These headers enable browsers to validate cached content efficiently. When a browser requests a font, it sends the ETag or Last-Modified timestamp, and if the server verifies the file hasn’t changed, it sends a 304 Not Modified response, reducing bandwidth usage.
- Leverage content delivery networks (CDNs): Hosting your font files on a CDN allows faster delivery and can optimize caching globally across various locations, reducing latency.
- Versioning the fonts: Append a version string to your font URLs (e.g.,
font.woff?v=1.2
) so when a new version is released, the browser will treat it as a new resource and fetch it afresh, avoiding conflicts with older cached versions.
Using WordPress plugins to optimise fonts
If you are using a theme without your chosen fonts included, there are a number of WordPress plugins to add fonts easily including:
Easy Google Fonts
A popular plugin that allows you to add and customize Google Fonts for your website. Choose from hundreds of fonts and apply them to different elements of your site.
Custom Fonts
This plugin enables you to upload your own custom fonts or choose from a vast collection of Google Fonts, all hosted directly on your own web server.
Use Any Font
A simple plugin that allows you to use custom fonts in addition to the ones that are already included in WordPress. You can upload a font of your choice and the plugin will turn it into a web-friendly typeface.
Fonts Plugin
A plugin with a simple interface that allows you to select fonts, selectively load fonts, and customize typographic settings. It also displays a live preview of how the font will look.
The benefits of optimising fonts on your WordPress website
The ultimate goal here is to ensure your WordPress website runs as fast as possible, to provide the best possible experience to your visitors whenever they access one of your web pages.
If you’d like to discover more ways to improve the speed, performance, and sustainability of your website, we have a range of helpful, in-depth guides:
- How to Optimise Images for a Faster, More Sustainable WordPress Website
- How to Optimise Videos for a Faster, More Sustainable WordPress Website
- The Ultimate Guide to WordPress Sustainability
And if you find these articles useful, ensure you never miss an update by subscribing to our monthly newsletter here.
Making font optimisation a priority can significantly impact your site’s speed and performance. It can also help you reduce your site’s carbon footprint. Benefits include:
- Reducing your page weight
- Maximising page speeds
- Boosting SEO rankings
- Providing a better UX to visitors
- Improving visitor retention
- Increasing conversions
- Reducing your carbon footprint.
Before you do, why don’t you measure the carbon footprint of your WordPress website to know where you stand?
This will give you a baseline to use and measure the improvements your video optimisation efforts make towards reducing your carbon footprint.
Measure and reduce your WordPress website’s carbon footprint with Kanoppi
Try a free demo of Kanoppi, a tool that provides helpful insights about your WordPress website’s carbon footprint with intelligent recommendations for reducing it.
Stay in the know
Sign up for our mailing list – we’ll share industry insights, product updates and company news.
"*" indicates required fields