Typography is one of the first things defined in any brand. Fonts are chosen carefully, documented properly, and applied consistently across everything from pitch decks to packaging.
So when it comes to a website, the assumption is usually straightforward. Use the brand font. The issue is that what works in a brand guideline doesn’t always translate well to the web.
On a website, fonts are not just a design choice. They’re files that need to be downloaded, rendered, and applied in real time. This introduces trade-offs, and in many cases, those trade-offs are not worth it. Let’s explore why custom fonts are probably affecting your digital sustainability…
What do we actually mean by “custom” vs “web” fonts?
A custom font is typically one owned or licensed by a brand and hosted directly on the website. It’s primary purpose is often to maintain visual consistency across channels.
A web font, such as those provided by Google Fonts, is designed specifically for browser delivery. These fonts are optimised for performance, widely supported, and distributed through global infrastructure.
From a design perspective, the difference may seem minor. From a technical perspective, it really isn’t.
Fonts are often heavier than they look
Fonts don’t behave like colours or spacing rules. Each variation is a separate file. That means:
- Regular (400) is one file
- Medium (500) is another
- Bold (700) is another
- Italics add even more
It’s not unusual for a site to load five or six font files just to support a single typeface. Even in WOFF2 format, that can quickly add up.
Unlike images, fonts are also tied to how text is rendered. In many cases, they block content from appearing until they have loaded.
This affects:
- page load speed
- perceived performance
- Core Web Vitals
And ultimately, it affects how users experience the site.
The user experience problem
If you’ve ever loaded a site and watched text appear late, shift position, or change style mid-load, you’ve seen this exact issue in action.
There are two common behaviours:
- Flash of invisible text (FOIT), where nothing appears until the font loads.
- Flash of unstyled text (FOUT), where a fallback font is shown first, then replaced.
Neither is ideal. One delays content. The other creates visual instability.
On slower connections or less powerful devices, this becomes more noticeable. It can make a site feel unpolished, even if the design itself is strong.
The speed/sustainability angle most people miss
Fonts are part of your page weight. Every file that needs to be downloaded contributes to the total amount of data transferred. That data requires energy to move through networks and render on devices.
On a single visit, the impact is small. Across thousands or millions of visits, it adds up. This is another one of those areas where a small decision is repeated at scale.
Custom fonts are often larger and less efficiently delivered than their web-optimised equivalents. They’re also more likely to be duplicated across sites, meaning users download similar assets multiple times rather than relying on cached versions.
Reducing unnecessary font weight doesn’t just deliver a performance improvement (and all the possible ranking benefits that come with it), it’s also a very straightforward way to reduce digital waste.
Why Google Fonts are often more efficient
There’s a common assumption that self-hosting fonts is always better. In practice, it depends on how those fonts are delivered. Google Fonts are served via a global content delivery network. That means:
- files are delivered from locations close to the user
- performance is consistent across regions
- caching is more effective
In many cases, a user may already have a Google Font cached from visiting another site. That removes the need to download it again. With custom fonts, that benefit does not exist. Every site loads its own version.
This isn’t a reason to default blindly to Google Fonts, but it is a factor worth considering. In marketing, every 0.1 second of improvement you can squeeze out of your site matters. Think about it: No one will even see your brand font if your competitor outranks you and is gobbling up all the traffic.
The brand argument is often overstated
The most common objection is simple:
“It’s our brand font.”
In some contexts, that matters. In print, in campaigns, in controlled environments where the experience is fixed. On the web, the reality is different. Most users aren’t comparing your typography to your brand guidelines. They’re trying to read content, navigate pages, and complete tasks.
Subtle differences in typeface are rarely noticed. Performance issues are. A slightly different font which loads instantly and reads clearly will usually outperform a perfect brand match that slows the experience down.
When a custom font makes sense
Now, I don’t want to come across as being completely “anti-branding”. There are valid use cases for a custom font. A distinctive typeface can add value in specific situations, particularly for headings or display elements where brand expression matters more. The key is to use it deliberately.
That might mean:
- limiting it to headlines rather than body text
- reducing the number of weights used
- subsetting the font to include only required characters
- ensuring it is properly optimised before deployment
The problem is not custom fonts themselves. It’s using them everywhere without considering the cost.
Practical ways to improve
If you’re reviewing your current setup, there are a few straightforward changes that can make a difference.
- Limit the number of font families you use
- Reduce the number of weights and styles
- Use WOFF2 format wherever possible
- Subset fonts to remove unused characters
- Apply
font-display: swapto avoid invisible text - Consider whether a system font or Google Font would perform better
These are not complex changes, but they can have a noticeable impact.
Accessibility is often overlooked
Let’s face it: Custom fonts are usually chosen for visual identity, not readability, which can introduce another set of problems entirely.
Some typefaces have unconventional letter shapes. Others are too thin at smaller sizes or lack sufficient contrast between characters. What looks distinctive in a brand context can become harder to read in practice, particularly for website visitors with a visual impairment.
Web fonts, particularly widely used ones, tend to be tested more thoroughly for on-screen readability. They’re designed to perform across different devices, resolutions, and conditions. For users who rely on clarity rather than aesthetics, this matters.
A better way to think about it
Choosing a font for your website can’t just be a design decision. With online competition only getting more and more fierce, it has to also become a performance decision, an accessibility decision, and increasingly, a sustainability decision.
The question isn’t whether a custom font looks better in isolation. It’s whether it improves the overall experience enough to justify the cost it introduces.
In many cases, the answer is no. And that’s where a simpler, more efficient choice tends to deliver more value. Faster load times = more money in your pocket. It’s a no brainer!
If you need help finding out whether your site is being affected by custom fonts, get in touch with us today to organise a full site audit.
