Convertir TTF en WOFF2

Rien n’est redessiné. Un TTF est un ensemble de tables — les contours, le mappage de caractères, les métriques, le crénage, les définitions de fonctionnalités OpenType — et le WOFF2 garde chacune d’elles, compressée en Brotli après une passe de prétraitement qui réarrange les données de fonte dans une forme que le compresseur gère bien. Déballer un WOFF2 restitue le TTF qui y est entré.

C’est pourquoi la conversion est sans perte et pourquoi elle ne demande aucune réflexion sur la qualité. Il n’y a aucun réglage à se tromper, pas de rééchantillonnage, pas de décision de couleur. La seule chose que vous pouvez faire de travers ici est de savoir si vous aviez le droit de le faire, ce qui est la section suivante et celle que la plupart des outils oublient.

Une fonte est un logiciel et est sous licence comme un logiciel. La licence de bureau qui accompagne un TTF acheté couvre l’installation sur un nombre déclaré de machines et l’utilisation pour fabriquer des choses ; elle ne couvre pas automatiquement le fait de mettre le fichier sur un serveur web où n’importe qui peut le télécharger. L’usage web est normalement une licence séparée, vendue séparément, et souvent tarifée au nombre de vues mensuelles.

Rien dans le fichier ne vous arrête, ce qui est précisément le problème — la conversion prend une seconde et la violation est invisible jusqu’à ce que quelqu’un regarde. L’exception qui mérite d’être sue est la SIL Open Font License, sous laquelle la plupart des fontes libres sont publiées : elle autorise la conversion, le sous-ensemble et l’auto-hébergement, sous réserve que la fonte ne soit pas vendue seule et que les noms réservés ne soient pas réutilisés. Lisez le texte de la licence dans le téléchargement ; il fait en général une page.

Une fonte arrive sur une page par une règle @font-face qui lui donne un nom de famille, pointe vers le fichier, et déclare quel poids et quel style ce fichier particulier représente. Le nom de famille est local à votre feuille de style et arbitraire — il n’a pas besoin de correspondre à ce que la fonderie a appelé la fonte — et les déclarations de poids et de style sont ce qui permet au navigateur de choisir le bon fichier quand le texte est mis en gras ou en italique.

L’erreur courante est une règle pour toute la famille. Le navigateur ne refusera pas de mettre en gras ; il en synthétisera un en étalant le poids régulier, et le résultat est visiblement pire que le vrai gras qui reste inutilisé dans le même répertoire. Une règle par fichier, avec des valeurs honnêtes de poids et de style, est toute la discipline.

Un TTF commercial couvre le latin, le latin étendu, le cyrillique, le grec, les symboles monétaires et plusieurs centaines de glyphes que personne sur un site en français n’utilisera jamais, et chaque visiteur télécharge tout cela. Réduire la fonte aux caractères réellement nécessaires bat en général ce que la compression accomplit seule.

Faites les deux, dans cet ordre : sous-ensemble d’abord, puis conversion. Une fonte de bureau de 300 ko réduite au latin de base et emballée en WOFF2 atterrit en général autour de 25 ko. Faites attention au sous-etteur toutefois — à qui on dit de ne garder que les caractères en usage, il jettera volontiers aussi les tables de ligatures et d’alternatives, et le CSS qui les active ne fait alors plus rien du tout.

Un navigateur à qui on dit d’utiliser une fonte qu’il n’a pas fini de télécharger doit décider quoi faire du texte en attendant. Par défaut il attend — jusqu’à trois secondes dans la plupart des navigateurs — et n’affiche rien. C’est le flash de texte invisible, et c’est la raison la plus courante pour laquelle un site avec une fonte personnalisée paraît lent sur un téléphone.

Une ligne le corrige : font-display: swap dans la règle @font-face dessine le texte immédiatement dans une police de repli et le refait couler quand la vraie fonte arrive. Le reflow est visible et c’est bien mieux qu’une page vide. font-display: optional va plus loin, en sautant la fonte pour cette visite si elle n’est pas prête presque tout de suite, ce qui supprime le reflow au prix de visiteurs qui ne verront jamais la fonte.

L’habitude de déclarer WOFF2, puis WOFF, puis TTF, puis EOT, puis une fonte SVG dans la même règle date d’environ 2013 et ne sert plus personne. Tous les navigateurs actuels lisent le WOFF2, Safari et les navigateurs mobiles compris, et ce depuis des années.

Déclarer le seul fichier est le conseil actuel. Un navigateur assez vieux pour passer à côté du WOFF2 retombera sur une fonte système, ce qui est un résultat acceptable et bien meilleur que de maintenir cinq copies de chaque poids pour qu’un navigateur que personne n’exécute obtienne son préféré. Moins de fichiers veut aussi dire moins de chances que l’un d’eux soit périmé après une mise à jour de fonte.

Convertir une famille veut dire convertir chaque fichier : régulier, italique, gras, gras italique, et tous les poids supplémentaires que le design utilise réellement. Chacun devient son propre WOFF2 et sa propre règle @font-face sous le même nom de famille, et le navigateur ne télécharge que ceux dont une page a besoin.

C’est là que le budget de poids de la page est en général perdu. Quatre poids à 25 ko font 100 ko avant que quoi que ce soit d’autre ne charge, et la plupart des designs en utilisent deux. Convertissez ce à quoi la feuille de style fait référence plutôt que tout le dossier — les poids inutilisés ne coûtent rien sur disque et tout dans la cascade réseau si une règle pointe discrètement vers eux.

Les contours TrueType portent des instructions de hinting — un petit programme basé sur une pile par glyphe indiquant au moteur de rendu comment déformer la forme à petite taille pour que les fûts tombent sur des pixels entiers. Ces instructions sont des tables comme les autres et survivent intactes à l’emballage en WOFF2.

Savoir si elles gagnent leurs octets est une autre question. Les écrans haute densité ont assez de pixels pour que la poussée soit invisible, et macOS ignore le hinting complètement. Sur une fonte au hinting lourd, les instructions peuvent représenter une fraction notable du fichier, et un sous-etteur peut être prié de les laisser tomber — cela mérite d’être mesuré plutôt qu’assumé, et vaut la peine d’être conservé si votre trafic est sous Windows et que la fonte est utilisée à petite taille.

Celui-ci tourne sur notre serveur plutôt que dans votre navigateur, parce que le travail est fait par fontTools et il n’existe pas de version navigateur de cet outil. Le fichier voyage sur une connexion chiffrée, est converti dans un environnement isolé, et le répertoire de travail est supprimé dès que la tâche se termine.

La limite gratuite est 25 Mo par fichier. Aucune fonte ordinaire n’approche — une TTF complète avec un grand jeu de caractères fait quelques centaines de kilooctets, et une fonte CJK, qui est la seule catégorie à devenir vraiment grosse, reste bien en deçà.