The Good Manager  >  Training modules

100 points to know about...
Eco-Design Web Development

100
points to know about...
Back to module summary

Notion 42

Font impact on page load.

Target skills

Learn about how fonts impact web performance and sustainability.

Typography on the web is defined as the art of presenting content in a way that is pleasing, aesthetically pleasing and accessible to all.
When you create content on your website, you have the choice between customizing the font or selecting one from the Google catalog.

In this module, we will see the different impacts that the choice of a font can have on the performance and durability of your website:

Font loading
It is important to take into account the amount of energy required to load the chosen font. The longer the download time, the more energy it requires.

The HTTP requests
It is important to take into account the number of requests needed to load all the elements of a web page. The more HTTP requests there are, the greater the impact. It will require much more energy.

The weight of the page
The smaller the size of the web page (kilobytes or megabytes) the less energy it takes to load it. As a result, our environmental impact is less.

In the previous grain we have defined 3 types of fonts. Taking these criteria into account, we can conclude that system fonts consume the least energy because they are installed on local computers. However, they limit the possibilities for designers.

Web fonts, on the other hand, expand the designer's palette, but at the same time can increase HTTP requests and page weight, and slow down page loading. Different sets of web fonts can have different effects, as seen in the previous grain with most popular web fonts.

A bad choice of font has a direct impact on a number of parameters such as

  • The download time of the web page;

All the elements that make up a web page are likely to have an impact on its download time. So, if you choose a custom font, it is important to ensure that it does not have too great an impact on the performance of your website.

  • Readability of the text;
  • Accessibility of the text on all output devices (printer, etc.);
  • Google search engine rankings;
  • Carbon footprint of the site.