TTF, WOFF, WOFF2 : Convertir et optimisez vos polices web

Vous avez déjà passé du temps à peaufiner le design d’un site, choisi une belle typographie… et pourtant, la page met une éternité à s’afficher. Le texte apparaît en retard, ou pire, change brusquement de style sous les yeux de l’utilisateur. Frustrant, n’est-ce pas ? Rassurez-vous, vous n’êtes pas seul dans ce cas. Derrière ce problème se cache souvent un détail que l’on néglige quand on débute : le format des polices de caractères. Entre TTF, WOFF et surtout WOFF2, il existe des différences majeures qui ont un impact direct sur les performances, l’expérience utilisateur et même le référencement. Nous allons découvrir comment optimiser vos polices de caractères et convertir le format TTF en WOFF2.

• Comprendre enfin pourquoi le format des polices influence directement la vitesse d’un site, la lisibilité du texte et la perception de qualité par les visiteurs
• Apprendre à améliorer concrètement les performances web et les Core Web Vitals grâce à des choix simples et durables sur les polices
• Gagner en autonomie pour faire des sites plus rapides, plus professionnels et mieux référencés, sans outils complexes ni connaissances avancées

Dans ce guide complet, nous allons prendre le sujet à bras-le-corps, en partant de zéro. L’objectif est simple : vous aider à comprendre ces formats, à savoir pourquoi et comment convertir TTF en WOFF2, puis à les intégrer proprement dans vos pages web pour améliorer vos performances et vos Core Web Vitals.

Comprendre les formats de polices de caractères

Avant de parler d’optimisation, il faut comprendre de quoi on parle. Une police de caractères est un fichier, exactement comme une image ou une feuille CSS. Et comme tout fichier, son format influence son poids, sa compatibilité et sa rapidité de chargement.

Le format TTF, l’ancêtre polyvalent

Le format TTF, pour TrueType Font, existe depuis la fin des années 80. À l’origine, il a été conçu pour les systèmes d’exploitation et les logiciels de bureautique. Autrement dit, il est parfait pour un document Word ou un PDF, mais pas forcément pour le web moderne.

Un fichier TTF contient énormément d’informations, parfois inutiles pour un navigateur. Résultat : il est souvent lourd. Quand un site web charge une police TTF brute, le navigateur doit télécharger un fichier volumineux, ce qui ralentit l’affichage du texte.

Bien souvent, lors d’un audit de performance, on découvre une police TTF de plus de 400 ko chargée dès la première page. Après conversion en WOFF2, elle descend sous les 80 ko. Le gain est immédiat et visible.

Le format WOFF, pensé pour le web

Le format WOFF, pour Web Open Font Format, a été créé spécifiquement pour le web. Il reprend les informations essentielles d’une police tout en les compressant. Le navigateur télécharge donc un fichier plus léger, sans perte visuelle.

WOFF est aujourd’hui très bien supporté par les navigateurs modernes. Il a longtemps été la norme pour intégrer des polices personnalisées sur un site. Cependant, il existe encore mieux.

Le format WOFF2, la version optimisée

WOFF2 est l’évolution naturelle de WOFF. Il utilise un algorithme de compression plus performant, ce qui permet de réduire encore davantage la taille des fichiers.

En pratique, un fichier WOFF2 est souvent 20 à 30 % plus léger qu’un fichier WOFF, et parfois jusqu’à 70 % plus léger qu’un TTF. C’est précisément pour cette raison que WOFF2 est aujourd’hui le format recommandé pour le web.

Pourquoi convertir TTF en WOFF2 est devenu indispensable

À ce stade, une question revient souvent : pourquoi se donner la peine de convertir TTF en WOFF2 ? Après tout, si le site fonctionne déjà. La réponse tient en un mot : performance. Plus précisément, performance perçue par l’utilisateur.

Quand une page se charge, le navigateur bloque parfois l’affichage du texte tant que la police n’est pas disponible. Ce phénomène s’appelle le FOIT, pour Flash of Invisible Text. À l’inverse, il peut afficher une police par défaut avant de la remplacer, ce qui provoque un FOUT, Flash of Unstyled Text.

En utilisant WOFF2, vous réduisez le temps de téléchargement de la police. Le texte apparaît plus vite, la page semble plus fluide, et l’utilisateur reste plus longtemps.

D’un point de vue SEO, Google prend en compte ces éléments à travers les Core Web Vitals. Un site rapide, avec un texte visible rapidement, est avantagé. Convertir TTF en WOFF2 n’est donc pas un détail technique, mais un vrai levier d’optimisation.

Les bases avant de se lancer dans la conversion

Avant de passer au terminal, il est important de poser quelques bases. Vous devez d’abord disposer légalement de la police que vous souhaitez convertir. Certaines polices commerciales interdisent la conversion ou l’utilisation web. Prenez toujours le temps de vérifier la licence.

Ensuite, gardez en tête qu’un site moderne ne se contente pas d’un seul format. En pratique, on fournit WOFF2 en priorité, puis WOFF en solution de secours pour les navigateurs plus anciens.

Enfin, n’oubliez pas que la conversion ne modifie pas l’apparence de la police. Le rendu visuel reste strictement identique. Seul le poids du fichier change.

Convertir TTF en WOFF2 depuis le terminal sur Mac

Entrons maintenant dans le concret. Si vous utilisez macOS, vous avez déjà tout ce qu’il faut pour travailler efficacement avec le terminal.

La méthode la plus fiable consiste à utiliser l’outil woff2, développé par Google.

Installer l’outil woff2

Sur Mac, le plus simple est de passer par Homebrew. Si vous ne l’avez jamais utilisé, Homebrew est un gestionnaire de paquets qui facilite l’installation d’outils en ligne de commande.

Ouvrez le terminal et tapez la commande suivante :

brew install woff2

Une fois l’installation terminée, vous pouvez vérifier que tout fonctionne en tapant :

woff2_compress --help

Si une aide s’affiche, vous êtes prêt.

Convertir un fichier TTF en WOFF2

Placez votre fichier TTF dans un dossier simple, par exemple sur votre bureau. Puis, dans le terminal, naviguez vers ce dossier.

cd ~/Desktop

Lancez ensuite la commande de conversion :

woff2_compress MaPolice.ttf

En quelques secondes, un nouveau fichier apparaît : MaPolice.woff2. C’est aussi simple que cela.

L’optimisation web n’est pas réservée à des outils complexes ou payants. Une simple ligne de commande peut transformer les performances d’un site.

Intégrer correctement une police WOFF2 dans votre site

Maintenant que vous savez convertir TTF en WOFF2, il est temps de passer à l’étape suivante : l’intégration dans le site. Rassurez-vous, nous allons avancer lentement, en expliquant chaque ligne et chaque choix, comme si nous écrivions le code ensemble.

Comprendre le rôle de @font-face

La règle @font-face permet d’indiquer au navigateur qu’une police personnalisée est disponible, où elle se trouve et comment l’utiliser. Sans cette règle, votre navigateur ne saura jamais qu’il peut utiliser votre fichier WOFF2.

Prenons un exemple simple. Imaginons que votre police convertie se trouve dans le dossier /fonts/ de votre site.

@font-face {
    font-family: 'MaPolice';
    src: url('/fonts/MaPolice.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

À première vue, cela peut sembler un peu abstrait. En réalité, chaque ligne a un rôle très précis.

La propriété font-family définit le nom que vous utiliserez ensuite dans votre CSS. Ce nom est totalement libre. Vous pourriez l’appeler autrement, mais choisissez quelque chose de clair pour vous y retrouver.

La ligne src indique le chemin vers le fichier WOFF2. Le navigateur comprend ainsi où aller chercher la police et dans quel format elle est fournie.

Les propriétés font-weight et font-style servent à préciser à quelle variante correspond ce fichier. Si vous avez plusieurs graisses ou styles, vous devrez déclarer plusieurs blocs @font-face.

Une erreur fréquente chez les débutants est de mettre toutes les variantes dans un seul bloc. Résultat : le navigateur ne sait pas quelle version utiliser et se rabat parfois sur une police par défaut.

Pourquoi font-display: swap change tout

C’est ici que nous entrons dans un sujet fondamental pour l’expérience utilisateur. Par défaut, le navigateur peut choisir de ne pas afficher le texte tant que la police n’est pas chargée. C’est ce fameux effet où les titres semblent “arriver en retard”.

Pour éviter cela, on utilise la propriété font-display.

@font-face {
    font-family: 'MaPolice';
    src: url('/fonts/MaPolice.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Avec font-display: swap, le navigateur adopte un comportement beaucoup plus intelligent. Il affiche immédiatement le texte avec une police système, puis remplace celle-ci par votre police personnalisée dès qu’elle est chargée.

Visuellement, le texte est lisible tout de suite. Et même si le changement de police est perceptible, l’utilisateur préfère largement cela à une page vide ou figée.

Sur un site vitrine pourtant très soigné, un simple ajout de font-display: swap fait disparaître une plainte récurrente des visiteurs. Ils ne penseront plus que le site “bug”, alors qu’il chargeait simplement trop lentement ses polices.

Utiliser WOFF2 et WOFF ensemble, intelligemment

Même si WOFF2 est aujourd’hui très bien supporté, il reste une bonne pratique de prévoir un format de secours. Cela garantit une compatibilité maximale, notamment sur des environnements plus anciens.

Voici un exemple plus complet :

@font-face {
    font-family: 'MaPolice';
    src: url('/fonts/MaPolice.woff2') format('woff2'),
         url('/fonts/MaPolice.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Le navigateur tente toujours de charger le premier format qu’il comprend. S’il supporte WOFF2, il ignorera complètement WOFF. Sinon, il utilisera la version de secours.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Cette approche permet de profiter pleinement des avantages de WOFF2, tout en restant robuste.

Appliquer la police dans votre CSS

Une fois la police déclarée, son utilisation est on ne peut plus simple.

body {
    font-family: 'MaPolice', Arial, sans-serif;
}

Ici, vous indiquez au navigateur d’utiliser votre police personnalisée en priorité. Si, pour une raison quelconque, elle ne peut pas être chargée, le navigateur utilisera Arial, puis une police sans empattement générique.

Ce mécanisme de secours est important. Il garantit que votre site reste lisible en toutes circonstances.

Le preload : un allié puissant pour le LCP

Nous allons maintenant aborder une optimisation plus avancée, mais extrêmement efficace. Elle concerne le chargement anticipé des polices.

Le navigateur découvre généralement les polices en lisant le CSS. Cela signifie qu’il attend parfois trop longtemps avant de commencer le téléchargement. Le preload permet de lui dire dès le départ : “Cette ressource est prioritaire”.

Dans le <head> de votre HTML, ajoutez :

<link rel="preload"
      href="/fonts/MaPolice.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

Décomposons calmement :

• L’attribut rel="preload" indique que la ressource doit être chargée le plus tôt possible.
• L’attribut as="font" précise le type de ressource, ce qui aide le navigateur à mieux gérer ses priorités.
• Le type renforce l’indication du format.
• Enfin, crossorigin est indispensable si votre police est utilisée via CSS, même sur le même domaine.

Grâce à cette simple balise, la police commence à se télécharger avant même que le CSS ne soit entièrement analysé.

Impact direct sur les Core Web Vitals

Toutes ces optimisations ne sont pas là pour faire joli. Elles ont un impact mesurable sur les indicateurs de performance définis par Google.

Le LCP, ou Largest Contentful Paint, correspond au moment où l’élément principal de la page devient visible. Très souvent, il s’agit d’un gros titre. Si ce titre dépend d’une police lourde et chargée tardivement, le LCP explose.

En utilisant WOFF2, en ajoutant font-display: swap et en préchargeant la police, vous réduisez drastiquement ce délai. Le contenu devient visible plus tôt, ce qui améliore la perception de rapidité.

Le CLS, qui mesure la stabilité visuelle, bénéficie aussi indirectement de ces pratiques. En affichant du texte immédiatement, vous évitez certains décalages gênants liés à l’apparition tardive des polices.

Enfin, le FID, bien que moins directement lié aux polices, profite d’un chargement global plus fluide et mieux orchestré.

Erreurs courantes à éviter quand on débute

Il serait dommage de terminer cette partie sans évoquer quelques pièges classiques.

La première erreur consiste à charger trop de variantes de police. Chaque fichier est une requête supplémentaire. Si vous n’utilisez que deux graisses, inutile d’en charger six.

La seconde erreur est de convertir une police, mais d’oublier de mettre à jour les chemins dans le CSS. Le navigateur ne trouve alors rien et retombe sur une police par défaut, sans message d’erreur visible.

Enfin, beaucoup oublient que chaque kilo-octet compte. Une police optimisée en WOFF2 fait souvent la différence entre un site perçu comme rapide et un site perçu comme lent.

Aller plus loin avec l’optimisation des polices web

Nous avons déjà parcouru un long chemin ensemble. Vous savez maintenant ce que sont les formats TTF, WOFF et WOFF2, pourquoi convertir TTF en WOFF2 est devenu une bonne pratique, comment effectuer cette conversion depuis le terminal sur Mac, puis comment intégrer correctement une police optimisée dans votre site. Pourtant, il reste encore quelques leviers importants à découvrir pour tirer le maximum de bénéfices de vos polices.

Comprendre le principe du sous-ensemble de police

Une police de caractères contient souvent bien plus de glyphes que nécessaire. Accents rares, symboles spécifiques, alphabets étrangers… tout cela est utile dans certains contextes, mais pas toujours sur un site vitrine en français.

Le sous-ensemble de police, aussi appelé subsetting, consiste à ne conserver que les caractères réellement utilisés. Par exemple, si votre site n’affiche que du texte en français sans symboles particuliers, il est inutile d’embarquer des centaines de glyphes supplémentaires.

En pratique, cela permet de réduire encore la taille du fichier WOFF2. Une police déjà optimisée peut parfois perdre encore 30 à 40 % de son poids.

Ce principe peut sembler un peu avancé, mais il repose sur une idée très simple : moins il y a de données, plus c’est rapide à charger.

Pourquoi le sous-ensemble améliore encore les performances

Quand un navigateur télécharge une police, il télécharge l’intégralité du fichier, même s’il n’utilise qu’une petite partie des caractères. En limitant la police aux glyphes nécessaires, vous réduisez le temps de téléchargement et le temps de traitement.

Cela se traduit par un affichage du texte encore plus rapide, notamment sur mobile ou sur des connexions plus lentes. Et comme toujours, ce gain bénéficie directement aux Core Web Vitals.

Pour le LCP, le raisonnement reste le même : une police plus légère arrive plus vite, donc le contenu principal s’affiche plus tôt. C’est un détail technique, mais son impact est bien réel.

Faut-il toujours sous-ensemble ses polices ?

La réponse est nuancée. Si votre site est multilingue, ou s’il affiche du contenu généré par les utilisateurs, le sous-ensemble peut devenir risqué. Vous pourriez vous retrouver avec des caractères manquants, affichés sous forme de carrés ou de symboles étranges.

En revanche, pour un site vitrine, un blog ou une landing page bien maîtrisée, le sous-ensemble est souvent une excellente idée. Comme souvent en développement web, tout est question de contexte et de compromis.

Bonnes pratiques typographiques pour le SEO

On parle souvent de SEO en termes de mots-clés ou de balises HTML, mais la typographie joue aussi un rôle indirect. Un texte lisible, affiché rapidement, favorise le temps passé sur la page et réduit le taux de rebond.

En optimisant vos polices avec WOFF2, vous améliorez la lisibilité dès les premières secondes. Le visiteur peut commencer à lire immédiatement, sans attendre que le site “se stabilise”.

Il est également conseillé de limiter le nombre de familles de polices. Deux polices bien choisies suffisent largement dans la majorité des projets. Au-delà, vous alourdissez inutilement la page et diluez l’identité visuelle.

Enfin, évitez d’utiliser des polices personnalisées pour de très petits textes peu visibles. Dans certains cas, une police système est plus que suffisante et permet d’économiser une requête réseau.

Mettre en place une stratégie cohérente sur tout le site

Une erreur fréquente consiste à optimiser une page, mais pas les autres. Les polices étant souvent chargées globalement, il est important d’adopter une stratégie cohérente sur l’ensemble du site.

Assurez-vous que les fichiers WOFF2 sont bien mis en cache par le navigateur. Un visiteur qui navigue sur plusieurs pages ne devrait pas recharger la même police à chaque fois. Cela améliore considérablement la fluidité globale.

Pensez aussi à vérifier régulièrement vos performances avec des outils comme Lighthouse. Ils vous donneront des indications précieuses sur le chargement des polices et les éventuels points d’amélioration.

Les polices Google Fonts

Pour aller encore un peu plus loin, il est important de savoir que de nombreuses polices utilisées sur le web sont disponibles gratuitement sur Google Fonts. Contrairement à une idée reçue, ces polices ne sont pas obligatoirement destinées à être chargées depuis les serveurs de Google. Vous pouvez parfaitement les télécharger, les héberger sur votre propre site et les optimiser comme n’importe quelle autre police, notamment en les convertissant en WOFF2. Cette approche vous donne un meilleur contrôle sur les performances, la confidentialité et le chargement de vos pages.

En hébergeant localement vos polices Google Fonts, vous évitez des requêtes externes supplémentaires et vous appliquez les mêmes bonnes pratiques vues dans ce tutoriel. Vous pouvez ainsi précharger vos fichiers, utiliser font-display: swap et réduire leur poids réel. C’est souvent une étape simple, mais très efficace, pour gagner en rapidité et offrir une expérience plus fluide à vos visiteurs, tout en gardant une grande liberté dans le choix de vos typographies.

Quand l’optimisation devient une prise de conscience

Il y a souvent un moment charnière dans le parcours d’un développeur ou d’un intégrateur. Ce moment où l’on réalise que chaque détail compte. Les polices en font partie.

Beaucoup racontent qu’après avoir optimisé leurs polices pour la première fois, ils ne sont plus jamais revenus en arrière. Le site semble plus “léger”, plus professionnel, presque plus agréable à utiliser. Ce n’est pas de la magie, simplement le résultat de bonnes pratiques appliquées avec soin.

Optimiser ses polices de caractères, ce n’est pas une obsession de perfectionniste. C’est un geste simple, accessible, qui améliore concrètement l’expérience des visiteurs. En comprenant les différences entre TTF, WOFF et surtout WOFF2, vous avez déjà fait un grand pas vers un web plus rapide et plus respectueux de l’utilisateur.

Savoir convertir TTF en WOFF2, intégrer correctement ses polices avec @font-face, utiliser font-display: swap et le preload, ce sont des compétences qui font la différence sur le long terme. Elles montrent que vous ne vous contentez pas de faire fonctionner un site, mais que vous cherchez à le rendre agréable et performant.

Enfin, gardez en tête que l’optimisation est un processus, pas une destination. Chaque projet est différent, chaque site a ses contraintes. L’important est de comprendre les principes pour faire des choix éclairés. En maîtrisant vos polices, vous maîtrisez une part essentielle de l’expérience web. Et ça, vos visiteurs le ressentiront, même sans savoir pourquoi.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr