Les polices auto-hébergées sont des fichiers de police diffusés à partir de vos propres serveurs, et non de ceux d'un fournisseur de polices tiers (par exemple, Google Fonts).
Il est extrêmement important de livrer les polices rapidement: une livraison des polices plus rapide signifie non seulement que le texte sera visible par l'utilisateur plus rapidement, mais cela a également un impact important sur la cause des décalages de mise en page. Si une police ne peut pas être diffusée avant qu'elle ne soit nécessaire, un décalage de mise en page se produit généralement lors du remplacement de la police. La taille de ce décalage de mise en page peut varier en fonction de la correspondance entre la police de remplacement et la police Web. Pour voir ce phénomène en action, regardez la démonstration et comparez les décalages de mise en page qui se produisent sur une connexion rapide par rapport à une connexion lente.
L'exemple ci-dessous combine deux techniques de performances pour diffuser une police auto-hébergée aussi rapidement que possible: l'utilisation de déclarations de police intégrées et le format de police WOFF2.
Déclarations de police intégrées: l'intégration des déclarations
@font-faceetfont-familydans le document principal, au lieu d'inclure ces informations dans une feuille de style externe, permet au navigateur de déterminer les fichiers de police à utiliser sur la page sans avoir à attendre le téléchargement d'une feuille de style distincte. Ce point est important, car les navigateurs ne téléchargent généralement pas les fichiers de police tant qu'ils ne savent pas qu'ils sont utilisés sur la page. Dans la plupart des cas, il est préférable d'utiliserpreloadpour charger des polices dans les déclarations de police intégrées.WOFF2: parmi les polices de police modernes, WOFF2 est la plus récente, prend en charge le plus large éventail de navigateurs et offre la meilleure compression. Comme WOFF2 utilise des brotlis, sa compression est 30% meilleure que celle de WOFF.
Pour améliorer davantage les performances, envisagez d'utiliser le sous-paramètre de police. Le sous-ensemble de police consiste à diviser un fichier de police en sous-ensembles plus petits, généralement dans le but de supprimer les glyphes inutilisés. Cela peut réduire considérablement la taille d'une police. Les outils permettant de créer des sous-ensembles de polices incluent fontkit, subfont et glyphhanger.
Pour en savoir plus sur les bonnes pratiques concernant les polices auto-hébergées, consultez la page Utiliser des polices auto-hébergées.
Exemple :
HTML
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>