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.
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 !
Add a New Comment