Google fonts : intégration optimisée dans vos css

Lorsque vous souhaitez ajouter une police depuis Google Fonts, plusieurs méthodes vous sont proposées, mais aucune n'est réellement optimisée pour votre score "PageSpeed" ou GTMetrix.

Si vous prenez soin d'optimiser vos dev, vous savez déjà que la méthode "@import" est à éviter.
Il reste donc l'intégration via javascript, ou un classique link rel :

 <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

Malheureusement, cela inclut un appel à un lien externe de votre site dont vous ne maitriserez pas les divers aspects techniques (cache, disponibilité, dev local nécessitant une connexion internet pour charger la police, etc ...).

Dans le cas de la police Montserrat, on peut voir qu'elle est chargée depuis une adresse distante :
http://fonts.googleapis.com/css?family=Montserrat => url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
Il suffit donc de télécharger la police en question, de la placer dans un dossier local (fonts), et de l'appeler directement depuis votre feuille de style.

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(fonts/montserrat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

De cette façon, vous aurez toujours accès à la police en local, même sans connexion internet, et vous pourrez activer la mise en cache de la police. De plus vous éliminer un appel externe, donc 1 requête dns, donc quelques millisecondes de chargement en moins

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Vous pourriez aussi être intéressés par

Utiliser plusieurs footer

Utiliser plusieurs footer pour , par exemple, avoir 2 bas de pages différents, 1 pour votre page d'accueil, et 1 pour la reste de votre blog.

Sep 14 2012