[WEB][23cm] Use only standard fonts

[RoxaneGall]

Use only standard fonts

Platform

OS	OS version	Langage
-	-	CSS

Main caracteristics

ID	Title	Category	Sub-category
-	Use only standard fonts	Environment	Optimized CSS

Severity / Remediation Cost

Severity	Remediation Cost
Minor	Minor

Rule short description

Avoid using non-standard fonts which require to be downloaded on the user's device.

Rule complete description

Text

Avoid using non-standard fonts which require to be downloaded. Prefer the usage of standard fonts, already available on the user's device, allowing to save bandwith while speeding up the display of the site. For example, compliant standard fonts are available here : https://systemfontstack.com/.

HTML

<p>Avoid using non-standard fonts which require to be downloaded.</p>
<p>Prefer the usage of standard fonts, already available on the user's device, allowing to save bandwith while speeding up the display of the site.</p>
<p>For example, compliant standard fonts are available here : https://systemfontstack.com/.</p>
<h2>Noncompliant Code Example</h2>
<pre>
font-family: Montserrat
</pre>
<h2>Compliant Solution</h2>
<pre>
font-family: Times New Roman
</pre>

Reference

This rule originates from the 115 best practices ecodesign guide published by Frédéric Bordage/GreenIT.fr. The practice "Favoriser les polices standards" can be found on the following 115 best practices github

Saved ressources

Storage, Network, Requests

Note concerning accessibility

Always check that the font you use is conform to accessibility requirements and best practices. Check the guidelines provided by official references, such as RGAA (Référentiel Général d'Amélioration de l'Accessibilité)

Implementation principle

• Inspect the CSS to find "font-family" property

[jhertout]

Hi @utarwyn, can you add two words to justify why it is not implementable? I have the same feeling but I am not a specialist of web tech. it will enable us to close the issue.

Thanks

[utarwyn]

Hello @jhertout, sorry for misleading you with the addition of the "non-implementable" tag. In fact, it's a perfectly relevant rule specified in the CnumR best-practice guide. I identified it as such because we don't have a CSS plugin at the moment, and I explain in the ticket https://github.com/green-code-initiative/ecoCode-html/discussions/2 that implementing it seems rather difficult.

I don't know what you want to do with the ticket? Do we leave it open even if a CSS plugin doesn't seem possible at the moment?

[jhertout]

OK, I set the issue as "implementable" and I put a tag "ecoCode-css" to know where we have to move it. I think we have to improve our labels. "ecoCode-standard" is not enough accurate.