Vous n’êtes pas sans savoir que lorsqu’on développe un site web, vous devez disposez de plusieurs format pour garantir une compatibilité et optimiser les performances. WOFF et WOFF2 sont les standards d’aujourd’hui pour les polices web, largement compressé et pris en charge par nos navigateurs du moment.
Je vais vous expliquer dans cet article comment nous pouvons convertir des fichier TTF (TrueTypeFont) en WOFF ou WOFF2 grâce à woff-tools sous linux Debian 13.
1. Installation de woff-tools
Debian 13 fournit woff-tools directement dans ces dépots officiels. Pour l’installer, ouvrez un terminal et exécutez
|
# Mise à jour des paquets disponibles |
|
sudo apt update |
|
# Installation de woff-tools |
|
sudo apt install woff-tools |
|
# Installation de woff2 |
|
sudo apt install woff2 |
Vous aurez alors accès à sfnt2woff et woff2_compress, cela nous permettra de convertir nos TTF's.
2. Convertir un fichier TTF en WOFF
Une fois woff-tools installé, vous pouvez utiliser la commande suivante pour convertir vos polices de TTF à WOFF :
#TTF 2 WOFF |
sfnt2woff votrepolice.ttf |
Vous aurez alors un fichier votrepolice.woff dans le même répertoire.
3. Convertir un fichier TTF en WOFF2
Le format WOFF2 est encore plus compressé, même recommandé pour les navigateurs modernes. Vous pouvez utiliser cette commande pour convertir votre TTF en WOFF2: 1
#TTF 2 WOFF2 |
woff2_compress votrepolice.ttf |
4. Convertir plusieurs fichiers en une seule commande
Parfois, comme dans mon cas, vous aurez plusieurs fichier TTF dans votre dossier de police, parce que vous avez plusieurs versions de celle-ci.
Un script bash sera très pratique pour ce faire , enregistrer le contenu suivant dans le fichier convert_fonts.sh la ou vous avez besoin d’effectuer une conversion :
#!/bin/bash |
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion terminée !" |
|
Donnez à ce fichier les permissions d’exécutions :
chmod +x convert_fonts.sh |
Ensuite, exécutez le :
./convert_fonts.sh |
5. Vérifier la compression des fichiers
Vous pouvez comparer facilement la taille des différentes polices :
ls -lhS *.* |
6. Utiliser vos polices converties
Une fois vos polices converties, il suffit d’utiliser ceci pour utiliser votre police via @font-face :
@font-face { |
font-family: 'VotrePolice'; |
src: url('fonts/votrepolice.woff2') format('woff2'), |
url('fonts/votrepolice.woff') format('woff'), |
url('fonts/votrepolice.ttf') format('truetype'); /* Ajout du TTF */ |
font-weight: normal; |
font-style: normal; |
} |
Et pour l’utiliser vous pouvez par exemple faire :
/* Applique la police à tous les éléments avec la classe "texte" */ |
.texte { |
font-family: 'VotrePolice', sans-serif; /* Utilise la police personnalisée */ |
} |
|
/* Applique un style aux balises <p> */ |
p { |
font-family: 'VotrePolice', sans-serif; /* Utilise la police personnalisée */ |
font-size: 16px; /* Exemple de taille de police */ |
color: #333; /* Couleur du texte */ |
line-height: 1.5; /* Espacement entre les lignes */ |
} |
|
/* Styles pour un élément avec l'id "texte-footer" */ |
#texte-footer { |
font-family: 'VotrePolice', sans-serif; /* Utilise la police personnalisée */ |
font-size: 14px; |
color: #666; /* Couleur plus claire pour le pied de page */ |
text-align: center; /* Centre le texte */ |
padding: 20px 0; |
} |
|
7. Remarques
C'est finalement très simple et totalement gratuit, merci les outils open sources encore.
Pensez à privilégier le format WOFF2, c'est celui qui convient le mieux aux navigateurs modernes
Commentaires
Aucun commentaire approuvé pour le moment.
Connectez-vous avec un compte commentateur pour publier un commentaire. Se connecter.