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

In this module, we will discover the different types of fonts that you can use for the design of a web project and how they can influence the sustainability of a website.

Three types of fonts:

System fonts
These are fonts that are installed by default on all types of devices (Mac or PC). The best known are the Arial and Times New Roman fonts.

Web fonts
Unlike the previous ones, Web fonts have the particularity of being hosted online and thus offer a wider choice of fonts.

Custom Web Fonts (DIY)
This type of font gives designers the opportunity to create their own web fonts. Like the previous ones, they are also hosted online.

Font type affects the performance of the web and its environmental impact mainly through its size. In the next lesson we will see in detail how they are related.

As the web fonts offer a big palette for the designer, let´s have a look at the most popular sets of these fonts.

The most popular web fonts options

Adobe Typekit
Typekit fonts are not free. The subscription varies between $25/year for a personal account and between $40 to $400/month for professional accounts.
The web designer has access to a variety of fonts with a download size of 11Kb. They have the advantage of having less impact on the weight of the page than the Google Fonts.

Google Fonts
The more or less 600 characters of the Google Fonts are available to users free of charge. Moreover, its download size is about 28Kb. When creating your website, if you choose a font from the Google catalog, it will only be downloaded once to the cached pages. This way, Google ensures that the fonts are displayed quickly.

Custom web fonts (DIY)
DIY fonts are not free. Note that the non-optimized version has a high download size of 30.5KB. As for the optimized version, the file size is smaller and requires fewer HTTP requests.
In order to optimize the performance of DIY fonts it is recommended to:

• Reduce the download size of the chosen font and thus make it lighter. It is recommended to use a service such as Font Squirrel.
• Load web fonts only on desktop browsers rather than on mobile phones.