Font-face
F
Definition complete
La regle @font-face en CSS permet de definir et charger des polices personnalisees depuis un serveur ou un CDN, plutot que de se limiter aux polices installees sur l'ordinateur de l'utilisateur. Elle est la base de la typographie web moderne.
La syntaxe @font-face declare : le nom de la police (font-family), les sources (src avec url() et format()), le style (font-style: normal/italic), le poids (font-weight), et le comportement d'affichage (font-display). Plusieurs declarations sont necessaires pour couvrir tous les styles et graisses.
Les formats de fichiers ont evolue : EOT (Internet Explorer historique), TTF/OTF (anciens navigateurs), WOFF (Web Open Font Format, compresse), et WOFF2 (compression superieure, support universel moderne). Aujourd'hui, WOFF2 suffit pour la plupart des projets, avec WOFF en fallback.
Les performances sont cruciales : les polices web ajoutent du poids et peuvent bloquer le rendu. Les optimisations incluent : preload des polices critiques, subsetting (inclure seulement les caracteres utilises), font-display: swap, et hebergement local plutot que CDN pour eviter une connexion supplementaire.
Exemples pratiques
- Declaration basique : @font-face { font-family: "Poppins"; src: url("/fonts/poppins.woff2") format("woff2"); font-weight: 400; font-display: swap; }
- Variable font : Une seule police variable couvre toutes les graisses : font-weight: 100 900;
- Google Fonts : L'inclusion via <link> genere automatiquement les @font-face necessaires.
A quoi sert Font-face ?
@font-face est indispensable pour utiliser des polices de marque, des Google Fonts en local, ou des polices commerciales licenciees. Elle permet de differencier visuellement un site et de renforcer l'identite de marque.
Font-face en pratique chez 123web
Chez 123web, nous optimisons l'integration des polices personnalisees avec @font-face. Nous hebergeons les fichiers localement, utilisons le format WOFF2, configurons font-display: swap, et preloadons les polices critiques pour des performances optimales.