Google Web Fonts en 5 conseils pratiques

Partagez si vous aimez ->

Avoir une police personnalisée en évitant les complications et les écueils de compatibilité, c’est aujourd’hui possible avec Google Web Fonts.

Voilà comment travailler avec Google Web Fonts en 5 points :

1/ Pourquoi choisir Google Web Fonts ?

Google Web Fonts est LE service montant Google chez les webdesigners.

Le nombres de polices de caractères du service est de plus en plus conséquent et croit de façon exponentielle.

Mais pourquoi choisir Google Web Fonts ?

La réponse est simple : la disponibilité des serveurs Google.

D’autre part, du fait qu’il s’agisse d’un service web, aucun problème de compatibilité n’existe. En faisant un liens sur les serveurs Google vous avez plus de disponibilité pour votre site lors des pics de visite car vous externaliser l’appel de la police.

Cela est d’autant plus important si vous êtes en hébergement mutualisé, et obligatoire si vous êtes en hébergement embarqué (Blogger, WordPress…).

Capture d_e_cran 2012-12-13 a_ 15.42.06

2/ Comment utiliser Google Web Fonts

Il vous suffit tout simplement d’aller vous promener sur Google Web Fonts avec votre compte Google d’ouvert et de choisir la police qui vous convient.

Notez les différents choix qui s’offrent à vous dans les menus, notamment la possibilité de filtrer pour avoir des polices manuscrites.

Une fois le choix fait, il suffit de cliquer sur « Quick-Use » à droite.

quick use de Google web font
Très important : bien repérer le temps de chargement de la police dans le compteur « Page load » à droite.

J’estime personnellement qu’au dessus de 40Ko, cela ne vaut pas la peine de ralentir le site pour une petite fioriture.

temps de chargement des polices Google Web font

Il ne reste plus qu’à copier le lien en bas dans la partie « standard », la meilleure option en terme de chargement, pour la coller dans le header de votre site ou blog en dessous de l’appel de votre feuille de style.

3/ Utilisation dans la feuille de style

Pour l’utilisation dans la feuille de style rien de plus facile :

Du fait que la police est déjà chargée, un simple « font-family: ‘ma police personnalise’, Arial, sans serif; » suffit.

Astuce : A savoir, Google met des « + » pour les blancs dans l’appel de la police. Cependant il faut laisser ces blancs dans la feuille de style (ex: ‘Milonga normal 400′ et non ‘milonga+normal+400′)
syntaxe de la police family dans Google web font

Résultat sur le header :

La police finale

4/ Bonnes pratiques d’utilisation des polices « embarquées

Voilà selon mon expérience les bonnes pratiques de la gestion de polices embarquées :

  • Une seule police embarquée par site
  • Pas plus de 40ko pour la police embarquée
  • Pas de police embarquée du tout au delà de 20 000 visites sur un serveur mutualisé
  • Pas plus de trois polices différentes sur le site ou blog (police embarquée, police par défaut du site, police utilisé pour les logos et pubs)
  • Utilisation de la police embarquée uniquement pour les titres H1, H2 voir H3, pas pour le texte.

5/ Alternative aux polices embarquées et à Google Web Fonts

Pour conclure, il est encore possible d’obtenir des polices étonnantes à partir des polices de base en jouant sur :

  • Le paramètre CSS letter-spacing
  • Le font-weight (bold) et text-transform (italic)
  • En listant les polices par défaut des navigateurs et en découvrant/redécouvrant : Arial Black, Trebuchet MS, Garamond et Courrier New

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons