T
fonts web-design performance typography svg ico file-extensions

Guide des extensions de fichiers Web et de polices : WOFF2, TTF, OTF et ICO

Pourquoi y a-t-il autant de formats de polices et d'icônes web ? Découvrez les différences entre .woff2, .woff, .ttf, .otf, .svg et .ico.

2026-04-11

Guide des extensions de fichiers Web et de polices : WOFF2, TTF, OTF et ICO

Lors de la création d'un site Web ou de la conception d'un produit numérique, le choix du format de fichier approprié pour votre typographie et vos icônes est crucial tant pour la qualité visuelle que pour la vitesse de chargement. L'utilisation d'un format de police obsolète peut entraîner un texte "invisible" pendant le chargement de la police, ou ralentir considérablement les performances de votre site.

Ce guide présente les principales extensions de polices et de graphiques Web que vous devez connaître.

Tableau de référence rapide : formats de polices et Web

Extension Nom complet Compression Utilisation principale
.woff2 Web Open Font Format 2.0 Très élevée Web moderne (Meilleure performance)
.woff Web Open Font Format 1.0 Élevée Web (Prise en charge des anciens navigateurs)
.ttf TrueType Font Faible Bureau Windows/macOS, Web de base
.otf OpenType Font Faible Conception graphique, typographie avancée
.svg Scalable Vector Graphics Variable Icônes Web, logos, art vectoriel
.ico Icon Aucune Favicons (icônes d'onglets de navigateur)

1. Le standard du Web moderne (.woff2)

Le WOFF2 est aujourd'hui la référence absolue en matière de typographie Web. Il utilise un algorithme de compression avancé (Brotli) pour rendre les fichiers de polices jusqu'à 30 % plus petits que le WOFF original.

  • Avantages : Temps de chargement les plus rapides, pris en charge par tous les navigateurs modernes.
  • Pourquoi l'utiliser ? Si vous ne vous souciez que des navigateurs modernes (Chrome, Firefox, Safari, Edge), le .woff2 est le seul format que vous devez inclure dans votre règle CSS @font-face.

2. Prise en charge des anciens systèmes (.woff)

Le prédécesseur du WOFF2. Bien qu'il soit encore largement pris en charge, il n'est pas aussi efficace.

  • Pourquoi l'utiliser ? Utilisez-le comme solution de secours si vous devez prendre en charge des navigateurs un peu plus anciens qui ne comprennent pas encore le WOFF2.

3. Standards pour le bureau et le design (.ttf, .otf)

Ce sont les formats que vous installez sur votre ordinateur pour les utiliser dans Word, Photoshop ou Figma.

  • TTF (TrueType) : Développé par Apple et Microsoft dans les années 1980. C'est le format le plus courant pour un usage général.
  • OTF (OpenType) : Construit sur le TTF, il prend en charge des "fonctions OpenType" avancées telles que les ligatures, les petites capitales et les glyphes alternatifs. Les designers préfèrent l'OTF pour les travaux d'impression et numériques haut de gamme.
  • Utilisation Web : Bien que vous puissiez les utiliser sur le Web, ils ne sont pas compressés et sont lourds. Il est préférable de les convertir d'abord en WOFF2.

4. Graphiques vectoriels (.svg)

Contrairement aux polices, qui sont des collections de caractères, l'SVG est un format d'image vectorielle.

  • Logos et icônes : Les SVG sont parfaits pour les logos car ils ne sont jamais flous, quel que soit le niveau de zoom.
  • En CSS : Vous pouvez utiliser les SVG comme images d'arrière-plan ou même comme "polices SVG" (bien que cette dernière option soit aujourd'hui largement abandonnée au profit du WOFF2).

5. Le Favicon (.ico)

Le format .ico est un conteneur spécialisé qui peut contenir plusieurs versions d'une icône à différentes tailles (16x16, 32x32, 48x48) dans un seul fichier.

  • Utilisation principale : Le "favicon" que vous voyez dans les onglets du navigateur.
  • Alternative moderne : La plupart des navigateurs modernes prennent désormais en charge le PNG ou l'SVG pour les favicons, mais le .ico reste la solution de secours la plus compatible.

Meilleures pratiques pour la typographie Web

  1. Prioriser le WOFF2 : Indiquez toujours le .woff2 en premier dans votre CSS pour vous assurer que les navigateurs modernes reçoivent le fichier le plus petit.
  2. Sous-ensemblez vos polices : De nombreux fichiers de polices contiennent des caractères pour des centaines de langues que vous n'utilisez pas. Le "sous-ensemble" d'une police supprime les caractères inutilisés, réduisant encore davantage la taille du fichier.
  3. Utilisez font-display: swap : Cela garantit que le texte est visible immédiatement à l'aide d'une police système, puis bascule vers la police personnalisée une fois le chargement terminé.

Questions courantes (FAQ)

Q : Puis-je convertir un .ttf en .woff2 en ligne ?

R : Oui ! Il existe de nombreux outils gratuits qui prennent vos fichiers de bureau .ttf ou .otf et les compressent en fichiers .woff2 prêts pour le Web.

Q : Le WOFF2 prend-il en charge toutes les fonctionnalités de l'OTF ?

R : Oui. Le WOFF2 est essentiellement un fichier OTF ou TTF enveloppé dans une couche de compression très efficace. Il conserve toutes les caractéristiques typographiques (comme les ligatures) du fichier d'origine.

Q : Dois-je utiliser l'SVG pour les icônes de mi site Web ?

R : En général, oui. Les SVG sont nets, prennent en charge la transparence et peuvent être stylisés avec CSS. Pour les jeux d'icônes complexes, certains développeurs préfèrent les "polices d'icônes" (utilisant un fichier .woff2), mais l'SVG intégré est considéré comme la meilleure pratique moderne.

Outils connexes sur Tool3M

Retour au blog