Web-fonts - Ne vous faites pas choper

Exercice de traduction (avec des ajouts); à partir de mon article Web-Fonts - Don't let “them” get you.

(Version originale sur LinuxQuestions.org.)

L'article s'adresse aux autheurs de pages Web (en HTML) avec connaissences en CSS et, spécifiquement, de la définition de font-faces.

Je vous remercie d'avance pour vos corrections et propositions qui m'aident à améliorer cet article. Le Français n'est pas ce que je maitrise le mieux.

Contenu

Un de mes chefs a dit une fois que, quand les choses commencent à devenir compliquées, une erreur a été commise.

Où la programmation est concernée, j'arrive à remonter mes actions jusqu'au point où une ligne de code mal composée peut être remplacée par quelque chose plus approprié.

Par contre, en examinant leurs usages courants par rapport à l'histoire des soit-disant Web-Fonts, ma conclusion est, qu'un tas de fausses décisions, prises indépendamment par des différentes personnes et organismes, parfois en complète conscience des conséquences, demandent que l'auteur ordinaire du Web doit rester ignorant et pleine de vénération aveugle. Autrement, le système n'a strictement aucun sens.

Qu'est ce qu'est un Web-Font ?

La question a été valide autrefois, mais ne l'est plus. C'est justement une des réalités qui demandent un peu de pondération, quand vous voulez façonner des documents en HTML en imposant des certaines polices :

Web-Fonts sont aujourd'hui (2020) simplement des polices que vous utilisez dans le Web.

Ce que eux veulent vous faire croire c'est qu'un Web-Font est une police qui fonctionne dans le Web, au contraire d'autres qui ne fonctionnent pas. Bien que personne ne peut vous donner une liste de polices qui, actuellement, ne fonctionnent pas dans le Web, eux ont des Web-Fonts à proposer. Et parce que vous voulez être sûr que vos documents restent jolis et lisibles.., vous continuez la lecture de cet article et vous ne prenez pas de décisions avant pouvoir réfuter ou confirmer mes propos et, peut-être, après quelques recherches et vérifications.

Formats de polices pour le Web

Je vous donne cette information toute de suite : Si vous avez des polices sous Open-Font-License ou d'autres polices libres installées sur votre système actuel, toutes ces polices sont apte à l'utilisation dans le Web. Ça vaut, d'un point de vue purement technique, pour quelconque police en format TrueType- ou OpenType. Vous devez, -en tous cas, Web-Font ou non-, vérifier que la licence d'une police permet son intégration dans HTML (ou PDF, si vous souhaitez intégrer des polices dans PDF). Même si vous achetez une police, son utilisation dans le Web peut encore être interdit par sa licence.

Probablement c'est la question des licences seulement, qui fait que nous devons parler des Web-Fonts.

Les auteurs de polices ou, plutôt, des grandes compagnies qui vendent de polices, veulent s'assurer que leurs polices, si elles sont publiées avec des contenues textuelles, ne soient pas réutilisées en dehors des sites Web où elles sont intégrées.

WOFF

De nouveaux formats ont été développés afin de restreindre les usages des polices, faites pour le Web. Un de ces formats est WOFF (Le Web Open Font Format). La licence est représentée dans le code du fichier de la police. Mais le format WOFF est arrivé quand la plupart des navigateurs Web ont déjà affiché des polices intégrées en format TrueType (ttf) et OpenType (otf). Le format WOFF lui-même est comprimé mais autrement rien d'autre que TrueType ou OpenType. Alors, mis à part la problématique des licences, qui ne concerne que des polices commercialisées, il reste la compression comme seul avantage de WOFF. Gardons ça en mémoire, je vais quand même continuer ma présentation des polices pour le Web.

WOFF2

Ceci est un format amélioré avec une plus forte compression que WOFF

Alterner entre des formats de polices

En 2020 tous les navigateurs Web importants affichent des polices en format WOFF, TrueType ou OpenType. À l'exception de l'Internet Explorer™ de Microsoft™ le même vaut pour WOFF2.

Comme rien ne vous impose l'utilisation des polices commerciales, -à la place de polices sous licence OFL ou autrement libre-, la seule chose qui nous intéresse dans WOFF est la compression.

Comparaison des taux de compression

Et voilà l'exemple authentique d'une police que je trouve installée sur mon système Debian : Linux Biolinum, le caractère de type Humanist de la famille de polices Linux Libertine font-sample

Cette police existe en TrueType ou OpenType. Pour la comparaison de ces formats avec WOFF et WOFF2, je prends la version TrueType et emploie un des nombreux services de conversion (https://font-converter.net/en), afin d'obtenir des fichiers dans les autres formats.

Les fichiers résultants se distinguent par leur taille :

LinBiolinum_Re.ttf 486K 100%
LinBiolinumRe.otf 1,1M / 378K 226% / 78%
LinBiolinumRe.woff 223K 46%
LinBiolinumRe.woff2 146K 30%

Le fichier en format OpenFont est beaucoup plus grand que la version qui se trouve dans les ressources pour ma distribution de Linux. Apparemment le convertisseur ne comprime pas correctement le format OpenType.

Mais vous n'avez pas besoin d'un convertisseur, si vos polices sont déjà en format WOFF ou WOFF2. De telles polices peuvent être téléchargées de https://www.cufonfonts.com/.

Une de ces polices est Lato. Elle est disponible en TrueType ou WOFF; je compare seulement les variantes Regular :

Lato-Regular.ttf 118K 100%
Lato-Regular.woff 45K 38%

Quelle leçon à apprendre ?

Des percentages font impression aux dirigeants politiques. Je ne suis pas un dirigeant politique.

Sur mes propres sites Web, j'utilise au maximum trois polices différentes. Pour le texte ordinaire il peut être nécessaire d'avoir aussi les glyphes pour l'écriture en gras et cursive, ce qui veut dire que j'intègre environ cinq fichiers de polices, qui seront alors téléchargés par les navigateurs visitant mon site. Mais imaginons un site où la police Lato et tous ces styles différents sont utilisés, c'est à dire 10 fichiers différents :
Lato-BlackItalic.ttf, Lato-HairlineItalic.ttf, Lato-Light.ttf, Lato-Black.ttf, Lato-Hairline.ttf, Lato-Regular.ttf, Lato-BoldItalic.ttf, Lato-Italic.ttf, Lato-Bold.ttf, Lato-LightItalic.ttf

L'ensemble des fichiers pour la variante TrueType prennent 1.1M d'espace sur le disque dur avec des tailles des fichiers individuels entre 90K jusqu'à 119K. Le format WOFF vous épargne un demi méga byte, car toute la famille est d'une taille de 452K, seulement.

Si une police est téléchargée le moment de sa première apparition sur une page Web, à part de l'espace qu'elle réclame sur le serveur Web, sa taille n'est de pratiquement aucune importance. Bien qu'un fichier énorme peut ralentir le procès de reproduction sur l'ordinateur qui reçoit la page, vous pouvez appliquez les méthodes suivants pour accélérer le processus:

Ces possibilités diminuent considérablement l'impacte de la taille d'un fichier de police.

Si vous pensez encore que WOFF et WOFF2 apportent des grandes changements, considérez aussi toutes les images qui font partie d'un site Web. Un autre type d'image, l'optimisation des palettes de couleurs et le dimensionnement des illustrations va probablement épargner beaucoup plus d'espace et accélérer le rendu des pages mieux que l'alternance des formats de polices.

Conclusion

Je ne m'occupe pas de savoir comment tout le monde intègre des polices dans des pages HTML. Mais je ne veux pas lire, non plus,
- qu'il faut s'abonner à un service en ligne pour pouvoir intégrer des polices,
- que dans le Web, il faut utiliser le format WOFF
- ou que seulement WOFF et WOFF2 seraient “web-safe”.

Ne restez pas figés dans une attitude qui n'est induit que par des slogans. Au moins, pas avant avoir expérimenté puis fait vos propres expériences.

Pas le temps ? Pas envie ? Ben... Tout est foutu, vous êtes mort.