Web fonts
W
Definition complete
Les web fonts (polices web) sont des fichiers de police telecharges par le navigateur pour afficher la typographie specifiee par le site, permettant d'utiliser des polices qui ne sont pas installees sur l'appareil de l'utilisateur.
La declaration CSS utilise @font-face specfiant la source du fichier et les proprietes (style, weight). Google Fonts et Adobe Fonts sont les services les plus populaires, offrant des centaines de polices gratuites ou sur abonnement.
Les formats incluent : WOFF2 (recommande, meilleure compression), WOFF (compatibilite IE11), TTF/OTF (fallback). Les variable fonts (un fichier, multiples variations) optimisent encore les performances.
L'optimisation des web fonts est cruciale pour les performances : font-display: swap (affiche un fallback en attendant), preload des polices critiques, subset (ne charger que les caracteres utilises), et self-hosting vs CDN.
Exemples pratiques
- Google Fonts :
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> - Self-hosting : Fichiers WOFF2 heberges localement,
@font-facecustom, controle total et pas de requete tierce (RGPD). - Font subsetting : Police avec caracteres latins uniquement (8Ko) au lieu de la police complete avec tous les alphabets (80Ko).
A quoi sert Web fonts ?
Les web fonts servent a creer une identite visuelle distinctive, assurer la coherence de la marque sur tous les appareils, ameliorer la lisibilite avec des polices adaptees, et se differencier avec une typographie unique.
Web fonts en pratique chez 123web
Chez 123web, nous integrons les web fonts de maniere optimisee. Choix de polices lisibles et performantes, self-hosting si necessaire, et preload strategique : votre typographie est belle et rapide a charger.