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

Facebook : Lister les pages que vous administrez

Pour publier sur une fan page, il faut obtenir un access_token valide avec l'autorisation de gérer les pages. Ce petit bout de code, à adapter selon vos besoins, liste les pages pour lesquelles vous êtes admin.

Déc 10 2012
wordpress 4.4 Clifford

WordPress 4.4 Clifford

Worpdress 4.4 est disponible depuis hier. APi Rest, nouveau theme, images responsives et le support des metadata pour les terms sont les principales nouveautés.

Déc 10 2015

Créer un serveur de sauvegarde

Si la plupart des hébergeurs proposent des solutions de sauvegarde dans leurs offres, ces sauvegardes s'avèrent souvent insuffisantes, nécessitant la mise en place d'un serveur de sauvegardes incrémentales externe. Tout ça pour à peine 5 € euros par mois

Fév 23 2015

Créer un compte administrateur WordPress

Pour des raisons évidentes de sécurité, il est préférable, comme sur tout système informatique, de ne pas réaliser les opérations courantes (rédaction, modération,etc..) en tant qu'administrateur. Il faut donc créer un nouveau compte administrateur.

Mai 19 2015