Vous souhaitez avoir une fusée qui va vous propulser tout en haut de la SERP ? Alors pas le choix, il va falloir vous retrousser les manches et peaufiner chaque petite parcelle technique de votre site ! Le chargement des fonts en fait partie, au même titre que les 4 autres leviers à travailler pour avoir un site qui dépote !
We love Speed
Je ne peux que faire mention de l'énorme conf. de Mattias Dugué sur le sujet lors du We love Speed 2021 : CDN et performances : ouvrez, c'est la police. En 25 min, Mattias va vous expliquer comment auto-héberger ses fonts, quels sont les avantages, mais aussi les inconvénients. C'est d'ailleurs là qu'on se rend compte que le sujet n'est pas aussi facile.
Comment auto-héberger ses fonts dans la pratique ?
Je vais tenter de résumer de mémoire comment je m'y suis pris... Mais encore une fois tout est dans la vidéo ci-dessus et je vous conseille de la visionner, elle est vraiment enrichissante et complète sur le sujet.
1) Déjà il faut choisir ses font et les télécharger. De mon côté, je vais au plus simple et je les récupère depuis https://fonts.google.com. Une fois téléchargées, elles sont logiquement au format ttf.
2) Vous allez ensuite devoir convertir les polices ttf au format woff & woff2.
3) Vous placez les polices dans l'un des dossiers sur votre serveur. Du genre /font/
4) Petit ajout dans votre fichier css :
@font-face
{
font-family: 'SSP';
font-style: normal;
font-weight: 400;
src: local(''), url('../fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),url('../fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
}5) Appel de votre police avec l'alias choisi (ici SSP) sur les balises souhaitées, et le tour est joué :
h1{font-family:SSP,sans-serif;}