Google Web Fonts en 5 conseils pratiques
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…).
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.
J’estime personnellement qu’au dessus de 40Ko, cela ne vaut pas la peine de ralentir le site pour une petite fioriture.
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.
Résultat sur le header :
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
