Changer la police d'écriture en HTML : la méthode
Résumé : méthode claire pour changer la police d’écriture en HTML. Explications pratiques, exemples et cas concret pour un site.
Brief : présentation des techniques modernes, des polices web safe, et de l’hébergement local via @font-face.
Changer la police d’écriture en HTML : méthode simple et rapide
Les balises <font> et <basefont> sont obsolètes. Elles restent lisibles, mais les navigateurs modernes privilégient le CSS. Pour un site propre et pérenne, il faut utiliser font-family et @font-face.
Étapes clés : héberger ou appeler la police, définir la règle CSS, prévoir une pile de secours. Chaque étape réduit le risque d’affichage incorrect.
- 🔧 Héberger la police sur le serveur ou utiliser Google Fonts.
- 🧩 Déclarer la police avec @font-face.
- 📝 Appliquer la police via font-family et ajouter des polices de secours.
- ⚖️ Vérifier la licence avant tout téléversement.
Cas pratique : l’agence fictive AtelierPixel a remplacé une police système par une police web hébergée. Le rendu est devenu cohérent sur mobile et desktop. Le site a gagné en identité graphique.
Insight : privilégier le CSS plutôt que les anciennes balises pour garder le contrôle typographique.
Comment déclarer une police avec @font-face en HTML/CSS
Téléverser les fichiers de police sur le serveur. Les formats usuels sont WOFF, WOFF2, TTF, OTF, EOT. Ensuite, ajouter une règle CSS comme indiqué.
Exemple d’approche : placer une règle @font-face dans la feuille de style, puis utiliser font-family sur le body ou sur des sélecteurs précis. Toujours prévoir une police de secours.
- 📁 Téléversement : garder une arborescence claire, ex. /fonts/.
- 🧾 Formats : inclure WOFF2 pour les navigateurs modernes.
- 🔒 Licence : vérifier l’usage web autorisé.
Insight : une bonne déclaration @font-face réduit les flashs typographiques et améliore les performances.
Pour illustrer l’usage, AtelierPixel a choisi une paire de polices : une sans-serif pour le corps, une serif pour les titres. Le site est devenu plus lisible et plus aligné avec la marque.
Importer une police via Google Fonts et l’utiliser en HTML
Google Fonts facilite l'intégration sans hébergement local. Il suffit de copier un <link> dans le <head> ou d’utiliser @import dans CSS. Puis appeler la police par son nom.
Exemple rapide : insérer <link href= »https://fonts.googleapis.com/… » rel= »stylesheet »> et utiliser font-family: ‘NomPolice’, sans-serif;. Toujours inclure une police de secours.
- 🔗 Copier le lien fourni par Google Fonts.
- 🎯 Appliquer la police aux éléments ciblés.
- ⚡ Préférer WOFF2 si besoin de performance.
Cas pratique : pour une landing page, l'usage de Google Fonts a réduit le temps de mise en place. Le rendu était identique sur Chrome et Safari sur mobile.
Insight : Google Fonts accélère la mise en place, mais vérifier la dépendance à un service tiers pour des besoins offline.
Polices web safe en HTML et piles de secours (font stacks)
Les polices web safe sont installées sur la majorité des appareils. Elles garantissent un rendu stable et rapide. Elles restent utiles pour les piles de secours.
Liste de polices fiables :
- 🖥️ Arial — sans-serif, très répandue.
- 📚 Times New Roman — serif classique.
- ✍️ Georgia — serif lisible sur écran.
- 🔡 Verdana — bonne lisibilité à petites tailles.
- ⌨️ Courier New — monospace pour code ou citations.
Exemple de pile de secours : font-family: ‘Inter’, ‘Helvetica Neue’, Arial, sans-serif;. Le navigateur tente chaque police dans l’ordre.
Insight : une pile bien pensée maintient l’apparence si la police principale ne se charge pas.
Tableau récapitulatif : formats et usages des polices 🎯
| 📦 Format | 🧾 Support | 🔎 Usage conseillé |
|---|---|---|
| WOFF2 🟢 | Navigateurs modernes 🌐 | Meilleure compression, prioritaire |
| WOFF 🟡 | Large compatibilité 🖥️ | Bonne alternative si pas WOFF2 |
| TTF / OTF ⚪ | Ancien support, desktop | Utile pour conversion ou sauvegarde |
| EOT 🔵 | IE ancien | Rarement nécessaire aujourd’hui |
Insight : prioriser WOFF2 pour les performances et inclure WOFF pour compatibilité.
Héberger localement une police : checklist technique
Avant de téléverser, vérifier la licence. Certaines polices nécessitent une licence web. D’autres sont gratuites pour un usage commercial.
- 📂 Téléverser les fichiers dans /fonts/.
- 🔧 Définir @font-face avec plusieurs src pour couvrir les formats.
- ⚡ Utiliser font-display: swap; pour limiter les textes invisibles au chargement.
- 🔍 Tester sur mobile et desktop, avec et sans cache.
Exemple d’impact : après avoir ajouté font-display: swap, l’agence AtelierPixel a réduit les flashes de texte et amélioré la perception de performance.
Insight : une checklist technique évite les problèmes d’affichage et respecte les licences.