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