La typographie web est un élément clé pour façonner l'expérience utilisateur et l'identité de marque.
En créant un projet Django ou un projet web statique, vous rencontrerez divers formats de police comme .ttf et .woff2.

Dans cet article, nous expliquerons les différences entre .ttf et .woff2, pourquoi les développeurs web préfèrent .woff2,
et comment convertir .ttf en .woff2 sous Ubuntu.
Nous fournirons également un script Bash pour automatiser le processus de conversion.


Divers formats de police pour la conception web

1. Qu'est-ce que TTF ?

TTF (TrueType Font) est un format de police universel co-développé par Apple et Microsoft.
Il est pris en charge à la fois pour l'impression et l'affichage à l'écran, et est largement utilisé sur divers systèmes d'exploitation.

  • ✅ Avantages :
  • Large prise en charge sur tous les systèmes d'exploitation
  • Adapté pour le rendu d'images ou les applications de bureau

  • ❌ Inconvénients (selon le web) :

  • Taille de fichier grande
  • Pas optimisé pour le web
  • Temps de chargement lent

2. Qu'est-ce que WOFF2 ?

WOFF2 (Web Open Font Format 2) est un format de police compressé conçu exclusivement pour le web.

  • ✅ Avantages :
  • Taux de compression très élevé (jusqu'à 30% plus petit que TTF)
  • Chargement rapide, optimisation réseau
  • Parfaitement supporté par tous les navigateurs modernes

  • ❌ Inconvénients :

  • Inadapté pour les applications de bureau ou certains rendus d'images
  • Nécessite une conversion distincte à partir de .ttf ou .otf

3. Pourquoi les développeurs web devraient-ils utiliser WOFF2 ?

Éléments TTF WOFF2
Taille de fichier ❌ Grande ✅ Petite
Performance web ❌ Faible ✅ Optimisée
Compatibilité du navigateur ✅ Bonne ✅ Très bonne
Adaptabilité des polices web ⚠️ Conditionnelle ✅ Fortement recommandé

Lorsque l'on considère la performance web et l'expérience utilisateur, sans raisons particulières, il est toujours préférable d'utiliser WOFF2.


4. Convertir TTF → WOFF2 sous Ubuntu

Installation des paquets nécessaires

sudo apt update
sudo apt install woff2

Une fois installé, vous pouvez convertir avec la commande woff2_compress.


Commande de conversion manuelle

woff2_compress Poppins-Regular.ttf

Un fichier Poppins-Regular.woff2 sera créé dans le même répertoire.


5. Bonus : Script Bash pour conversion automatique

En utilisant le script ci-dessous, vous pouvez convertir plusieurs fichiers .ttf en une seule fois. Ceux qui sont familiers avec les scripts bash peuvent le copier et l'utiliser.

convert-ttf-to-woff2.sh

#!/bin/bash

# Répertoire des polices à convertir
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# Vérification de la commande woff2_compress
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ Impossible de trouver la commande 'woff2_compress'"
    echo "Installez-la avec la commande suivante :"
    echo "    sudo apt install woff2"
    exit 1
fi

# Création du répertoire de résultats
mkdir -p "$OUTPUT_DIR"
echo "📁 Répertoire des résultats de conversion : $OUTPUT_DIR"

# Exécution de la conversion
echo "🔄 Conversion TTF → WOFF2 en cours..."

find "$FONT_DIR" -maxdepth 1 -type f -name "*.ttf" | while read -r ttf_file; do
    filename=$(basename "$ttf_file")
    base="${filename%.ttf}"
    output_file="$OUTPUT_DIR/$base.woff2"

    if [[ -f "$output_file" ]]; then
        echo "⚠️  Déjà présent : $output_file (sauté)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ Conversion terminée : $output_file"
done

echo "🎉 Toutes les conversions sont terminées !"

✅ Résumé

  • .woff2 est un format moderne conçu exclusivement pour le web, excellent en termes de performance et de taille.
  • .ttf est inefficace sur le web, mais utile pour d'autres usages comme le rendu d'images.
  • En tirant parti d'un script de conversion automatique, vous pouvez gérer plus efficacement les polices de votre projet.

Nous espérons que cela aidera à améliorer les performances des polices de votre projet web !