Hints

Medium This Hint is worth investigating further, and may warrant further attention depending on the type and quantity of URLs affected. Issue This Hint represents an error or problem that needs to be fixed.

Loads in too many webfonts

This means that the URL in question loads in more than 5 webfonts.

Why is this important?

Unlike web-safe fonts, webfonts are not pre-installed on devices, and must be downloaded by the browser before they are displayed. Your average webfont is about 40kb, and that's per weight, then multiply that by 3 for the italic and bold variants and you're looking at adding 120kb to your initial page load for each webfont that you decide to use. As such, loading in lots of webfonts adds to page weight and can slow down the rendering of content.

From a design perspective, it is argued that you should use no more than 2 fonts on your page, or 3 at the very most - so 5 webfonts would be considered 'too many' in terms of design anyway.

What does the Hint check?

This Hint will trigger for any internal HTML URL that loads in more than 5 webfonts.

How do you resolve this issue?

Loading in lots of webfonts slows down the page AND goes against design best practices, so it is at least worth considering whether you actually need all the fonts on a page. Then it comes down to a balancing act of optimizing page weight and achieving what you want visually, by removing certain fonts from the page.

Further Reading

Ready to try Sitebulb?
Start your free 14 day trial now

Start Free Trial