La graisse css pour les fontes, et les polices avec de la graisse

Salut,

Y’a-t-il des différences, enfin j’imagine que oui, entre les fontes qu’on graisse via css https://kodex.pierrelebedel.fr/css/graisses-des-polices-decriture-en-css/ et les fontes ayant déjà de la graisse chez Google fonts, par exemple ?

Peut-on imaginer ne télécharger qu’une seule fonte sur Google fonts et gérer toutes les déclinaisons de gras via uniquement css ?

Merci de votre éclaircissement !

Bonjour. Oui, il y a une différence, c'est une question d'optimisation.

Si la fonte est déclarée seulement en regular par exemple, le navigateur pourra ensuite la transformer en italique ou en gras si une déclaration CSS l'exige, mais ce sera via une extrapolation logicielle qui sera hasardeuse, en particulier pour l'italique.

Notez que certaines fonts peuvent embarquer dans un même fichier plusieurs épaisseurs et aussi l'italique. Ce qui fait que l'on a besoin d'une seule déclaration en @font-face pour toutes les graisses et tous les styles.

Bien sûr, le poids du fichier sera plus conséquent mais il n'y aura que des tests qui vous permettrons de savoir si le jeu en vaut la chandelle.

Tout cela n'enlève rien au fait qu'il faille faire les déclarations de styles en CSS, pour les éléments pour lesquels on souhaite un rendu spécifique. Il ne faut pas mélanger les deux concepts.
Modifié par Olivier C (09 Feb 2021 - 08:13)

Hum, je vois, Olivier.

Pour la fonte multi-graisse, tu aurais un exemple ? C’est laquelle qui offre cet avantage ? Je cherche justement à réduire le nombre de fichiers de polices sur un site.

Merci.

Je vais encore googler pour tenter de trouver un peu de littérature sur le sujet…

//EDIT : ah oui, j’étais déjà tombée sur cette page-là : https://www.artwai.com/optimiser-les-google-fonts/
Intéressant !
Modifié par myself (09 Feb 2021 - 08:16)

Olivier faisait probablement référence aux fontes variables (VF, variable font).

Quelques liens :
https://zeichenschatz.net/demos/vf/variable-web-typo/
https://24ways.org/2019/interactivity-and-animation-with-variable-fonts/
https://v-fonts.com/
https://johanronsse.be/variable-fonts/
https://web.dev/variable-fonts/

Pardon, j'avais édité entre temps mon message, en supprimant au passage la référence à la police Noto qui est effectivement une super police. Et je n'ai pas pris le temps de répondre car j'ai été pris par autre chose...

Je pense que chaque cas est spécifique et qu'il faut tester. Est-ce que cela vaut le coup par exemple d'alourdir le poids d'un fichier en ajoutant de l'italique si l'on on ne s'en sert que sur 2 lignes, sur 2 pages du site ? À l'inverse, si le rendu impacte fortement sur les titres, dans ce cas... Tout est affaire de compromis.