Longtemps, le web s'est limité à une poignée de polices installées par défaut sur les machines des visiteurs. Avec CSS3 et la règle @font-face, vous pouvez désormais utiliser n'importe quelle police dans vos pages, qu'elle vienne de Google Fonts ou de votre propre serveur. Voici comment déclarer, charger et optimiser une police personnalisée en 2026, en soignant à la fois la performance et la confidentialité.
La règle @font-face
La règle @font-face sert à déclarer une police en indiquant au navigateur où trouver le fichier correspondant. Une fois déclarée, la police devient utilisable partout dans votre feuille de style, exactement comme une police système classique.
Deux propriétés sont indispensables dans le bloc @font-face :
font-family: le nom que vous donnez à la police, choisi librement, qui servira ensuite de référence.src: l'emplacement du fichier de police (chemin local ou URL) ainsi que son format.
Voici un exemple complet. On déclare une police nommée MaPolice, puis on l'applique au corps du document :
@font-face {
font-family: "MaPolice";
src: url("/fonts/mapolice.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "MaPolice", system-ui, sans-serif;
}Notez la présence d'une pile de polices de secours (system-ui, sans-serif) après "MaPolice". Si le fichier ne se charge pas, le navigateur utilisera une police équivalente plutôt que de laisser un texte illisible. Pour chaque graisse ou style (gras, italique), vous déclarez un bloc @font-face distinct avec le bon fichier et les bonnes valeurs de font-weight et font-style.
Donnez toujours le même font-family aux différentes graisses d'une même police. Le navigateur sait alors associer automatiquement le bon fichier quand vous écrivez font-weight: 700 dans votre CSS.
Les formats de fichiers
Historiquement, garantir la compatibilité d'une police imposait de fournir plusieurs formats de fichiers, car chaque navigateur supportait le sien :
eot(Embedded OpenType) : réservé aux vieux Internet Explorer.ttfetotf(TrueType, OpenType) : formats de bureau, lourds car non optimisés pour le web.svg: un format de police désormais abandonné, qui servait aux anciens Safari mobiles.woff(Web Open Font Format) : première version compressée pensée pour le web.woff2: la version améliorée, avec une compression nettement supérieure.
En 2026, cette complexité a disparu. Le format woff2 est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) et offre la meilleure compression, donc les fichiers les plus légers. Inutile de multiplier les url() dans votre src : un seul fichier woff2 suffit dans l'immense majorité des projets.
@font-face {
font-family: "MaPolice";
src: url("/fonts/mapolice.woff2") format("woff2");
font-display: swap;
}Vous ne ciblez vraiment que des navigateurs antédiluviens ? Alors seulement vous ajouterez un woff en secours. Pour un site neuf, oubliez eot, ttf et svg : ils ne font qu'alourdir la page et ralentir le chargement.
font-display et la performance
Charger une police prend du temps, et pendant ce délai le navigateur doit décider quoi afficher. C'est le rôle de la propriété font-display, l'un des leviers de performance les plus importants pour le texte.
Deux comportements problématiques existent quand on ne contrôle rien :
- FOIT (Flash of Invisible Text) : le texte reste invisible tant que la police n'est pas chargée. Sur une connexion lente, le visiteur fixe une page blanche.
- FOUT (Flash of Unstyled Text) : le texte s'affiche immédiatement avec une police de secours, puis bascule sur la police finale une fois chargée.
La valeur font-display: swap force le comportement FOUT, ce qui est presque toujours préférable : le contenu est lisible tout de suite, puis la police personnalisée prend le relais. On évite ainsi le texte invisible qui pénalise l'expérience et les Core Web Vitals.
@font-face {
font-family: "MaPolice";
src: url("/fonts/mapolice.woff2") format("woff2");
font-display: swap;
}Pour aller plus loin, deux balises dans le <head> accélèrent encore le chargement :
preconnect: ouvre à l'avance la connexion vers un domaine externe (utile pour Google Fonts).preload: demande au navigateur de télécharger en priorité un fichier de police critique, avant même qu'il ne soit référencé dans le CSS.
<link rel="preload" href="/fonts/mapolice.woff2"
as="font" type="font/woff2" crossorigin>Le preload est puissant mais à manier avec parcimonie. Ne préchargez que la ou les polices réellement visibles dès le haut de la page, sinon vous entrez en concurrence avec d'autres ressources critiques.
Utiliser Google Fonts
Google Fonts est la bibliothèque de polices web la plus utilisée. La méthode la plus simple consiste à intégrer un <link> fourni par le service dans le <head> de votre page. Google génère alors le CSS et les fichiers de police nécessaires.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet">Les deux balises preconnect préparent la connexion vers les serveurs de Google, et le paramètre display=swap dans l'URL applique automatiquement la bonne stratégie d'affichage. Il ne reste plus qu'à utiliser la police dans votre CSS :
body {
font-family: "Inter", system-ui, sans-serif;
}Cette intégration est rapide à mettre en place, mais elle a un défaut majeur que nous allons voir : chaque visite déclenche une requête vers les serveurs de Google. Si vous travaillez sur la mise en forme, pensez aussi à harmoniser vos couleurs, par exemple avec les dégradés CSS3 pour vos arrière-plans.
Héberger les polices soi-même
Le self-hosting consiste à télécharger les fichiers de police et à les servir depuis votre propre serveur, plutôt que de les charger directement depuis Google. Cette approche a deux avantages décisifs.
Le premier est la performance. En hébergeant la police localement, vous supprimez une connexion vers un domaine tiers, vous maîtrisez la mise en cache et vous pouvez précharger précisément les fichiers utiles. Le résultat est souvent un affichage plus rapide et plus stable.
Le second, capital en Europe, concerne le RGPD et la confidentialité. Quand une police est chargée directement depuis les serveurs de Google, l'adresse IP du visiteur est transmise à Google, ce qui constitue un transfert de données personnelles. En janvier 2022, un tribunal allemand a sanctionné un site qui intégrait Google Fonts en direct, justement pour cette transmission d'IP sans consentement. Héberger les polices soi-même évite totalement ce transfert et place votre site du bon côté de la réglementation.
La mise en place est simple : on récupère les fichiers woff2, on les place dans un dossier du site, puis on les déclare avec @font-face, comme dans nos premiers exemples.
@font-face {
font-family: "Inter";
src: url("/fonts/inter-regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-bold.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}Le self-hosting est aujourd'hui la pratique recommandée pour tout site destiné à un public européen. Vous gagnez en vitesse et en conformité, sans dépendre d'un service externe.
Les polices variables
Les polices variables (variable fonts) sont une évolution majeure du format. Au lieu de livrer un fichier par graisse et par style (un pour le maigre, un pour le régulier, un pour le gras, etc.), une police variable regroupe toutes ces variations dans un seul fichier.
Ce fichier contient des axes de variation, des plages continues le long desquelles la police peut s'ajuster. Les plus courants sont :
wght: la graisse, par exemple de 100 (très fin) à 900 (très gras), sans paliers fixes.wdth: la largeur des lettres, du condensé à l'étendu.slnt: l'inclinaison, pour produire un effet oblique.
L'intérêt est double. D'abord une économie de poids : un seul fichier variable est souvent plus léger que la somme des fichiers statiques qu'il remplace. Ensuite une grande souplesse : vous pouvez utiliser n'importe quelle valeur intermédiaire de graisse, et pas seulement 400 ou 700.
@font-face {
font-family: "MaPolice";
src: url("/fonts/mapolice-variable.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}
.titre {
font-family: "MaPolice", sans-serif;
font-weight: 620;
}Remarquez la valeur font-weight: 100 900 dans le @font-face : elle déclare la plage de graisses couverte par le fichier. Ensuite, dans votre CSS, vous pouvez demander n'importe quelle graisse de cet intervalle, ici 620, pour un rendu finement calibré. Combinées au self-hosting et à font-display: swap, les polices variables offrent en 2026 le meilleur compromis entre richesse typographique, performance et respect de la vie privée de vos visiteurs.