Google Web Fonts en 5 conseils pratiques

Google Web Fonts en 5 conseils pratiques

Il y a quelques mois, je vous avais expliqué comment utiliser une police originale sur votre site web grâce à CSS. Je vous présente dans cet article le service « Google Web Font » de A à Z!

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

Image courtesy of http://www.freedigitalphotos.net

CSS, tutoriel, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

29 commentaires

  1. Bonsoir Ronan,
    Moi j’ai supprimé l’appel aux fonts de Google dans mon head et l’ai remplacé par un @font dans ma feuille de style css et en chargeant plusieurs formats de la même police (ttf, etc) sur mon serveur avec Filezilla pour que ce soit compatible sur tous les navigateurs.
    J’ai lu que c’était plus rapide et je l’utilise sur tout mon blog, même pour le texte.
    Quelle est la méthode la plus efficace ?
    Jérémie

    Répondre
  2. Bonsoir Ronan,
    très intéressant comme technique, simple d’utilisation.
    Par contre j’aurai une petite question, à quand estimes-tu que la page de ton site est ralenti? Quand c’est dans le rouge, ou alors même le orange?

    Je ne me doutais pas que la simple modification de style d’écriture pouvait faire ralentir une page internet avec beaucoup d’influence. Je retiens 😉

    Benjamin.

    Répondre
  3. Merci MarieEve pour la publication de mon article 😉

    @Jérémie : quand tu fais appel au serveur de Google tu ne ponctionne pas la bande passante de ton hébergement d’autant plus s’il est en mutualisé. La méthode d’appel Google reste pour moi la meilleure en terme de poids et de compatibilité puisque le service est en ligne.

    @Benjamin : tous les appels externes comme les librairies ajax jQuery ralentissent le site. Il faut veiller à ne pas tirer de tous les côtés si on veut qu’un site reste fluide.

    Répondre
  4. Bonsoir Ronan et merci pour ta réponse.
    Est-ce que ça ne peut pas quand même ralentir le temps de chargement de mon blog ?
    Jérémie

    Répondre
    • Bonsoir Jérémie,

      si ce risque existe, comme Ronan le dit à Benjamin : « tous les appels externes comme les librairies ajax jQuery ralentissent le site. Il faut veiller à ne pas tirer de tous les côtés si on veut qu’un site reste fluide. »

      D’où le conseil de ne pas dépasser 40ko par librairie de font. 😉

      Répondre
      • Bonsoir Marie-Eve,
        Merci pour la réponse. Je pense que je vais mettre le texte dans une police de base et les titres dans une police externe pour une question de rapidité.
        Très bon article, merci à Ronan.
        Jérémie

  5. Bonjour à Ronan et MarieEve et merci pour cet article.
    Je ne connaissais pas du tout ce système !!
    Je ne maîtrise pas encore le CSS, aussi je préfère ne rien toucher pour l’instant, de peur de cafouiller complet ! C’est un peu du chinois, pour moi, quand même :3 Je n’ai pas tout compris. (PS. MarieEve je n’ai pas encore commencé ta formation, ceci expliquant cela ^^)
    Sacramento n’existe apparemment plus, est-ce la raison qui fait que la phrase dans le site de Ronan est écrite de façon « quelconque » ?
    Bonne après-midi
    Marjorie

    Répondre
  6. Je connaissais cette solution c’est vraiment pas mal. J’espère qu’un jour Google nous laissera uploader nous même nos propres polices d’écritures!

    Répondre
    • Bonjour Damien,

      En fait c’est déjà possible :) il faut générer une police en scannant son écriture (ya des outils pour ça, tape « Make my own font » dans Google) puis on peut l’utiliser sur son site. Elle est pas belle la vie ?

      si tu essayes, je veux bien voir le résultat, je n’ai jamais pris le temps de le faire.

      Répondre
  7. Merci pour ces précieux conseils, Google Web Fonts est un très bon outil que j’utilise depuis plusieurs semaines pour améliorer le rendu des polices de mon site, c’est très efficace.

    Seul bémol : le ralentissement du chargement de mon site lorsque je les utilise.

    Répondre
  8. J’utilise moi aussi Google Web Fonts depuis un moment et c’est vraiment un très bon outil. Cependant je pense qu’il mérite encore un peu d »être amélioré, notamment au niveau des ressources qu’il utilise

    Répondre
  9. J’adore Google Webfonts c’est vraiment rapide et facile à mettre en place, je me souviens des premières solutions pour faire du font replacement et ce n’était pas aussi facile ni aussi respectueux des standards du web :)

    Répondre
  10. Très intéressant je ne connaissais pas du tout !

    Répondre
  11. Je conseillerais aux personnes qui n’en ont pas une réelle utilité de ne pas l’utiliser. Évitez au maximum les utilisations externes en tout genre qui finissent par ralentir dramatiquement le site, le plus souvent pour une expérience utilisateur pas forcément meilleure. Merci quand même pour l’article je vais regarder cela de plus près.

    Répondre
  12. bonjour Marie Eve et Ronan
    merci pour ce billet. c’est tout nouveau pour moi, je vais certainement l’essayer prochainement

    Répondre
  13. J’ai essayé google webfont, et j’adore, mais sur Internet Explorer ça ne marche pas ?? j’ai une arial bien laide, et je n’arrive pas à faire afficher la fonte de google, ce que je trouve génial c’est la possibilité de faire des H1 en webfont et que cela reste joli, ça permet de mettre des mots clefs en logo …hmmm de quoi nourrir le googlebot bien grassement sans trop se faire repérer par les concurrents qui croient que vous avez utilisé un logo en png.

    Répondre
    • Google Web Font marche à priori sur tous les navigateurs puisque la police est chargée en ligne donc il n’y a pas de problèmes de compatibilité.

      Peut-être un problème de cache ?

      Répondre
  14. Merci pour l’info, j »avais l’habitude d’utiliser les @font-face et je connaissais pas du tout Google Web Font. Je compte d’ailleurs essayer de ce pas mais c’est vraiment primordial de se limiter à une seule police embarquée?

    Répondre
    • Tout dépend si le temps de chargement est primordial. 😉

      Sans rire, si ton temps de chargement est très court, tu peux te permettre d’avoir plusieurs polices embarquées.

      Répondre
  15. Bien le bonjour Marie eve !

    Moi j’ai juste une question un peu différente : La police que tu as utilisé pour illustrer cet article est-elle une vraie police ? Car si oui je la trouve juste géniale et aimerai bien l’utiliser !
    Sinon, je suis un grand fan de ces fameuses google web font.

    A très vite!

    Répondre
  16. Merci pour les conseils. J’ajouterai en solution alternative, l’utilisation de la casse (capitale ou minuscule). Merci aussi d’avoir rappelé qu’il est important d’utiliser un nombre restreint de polices sur un site : en voyant ce service google, je crains les sites avec des typos dans tous les sens.

    Répondre
  17. Merci a Ronan et Marie Eve pour cet article fort utile. Il est vrai que le rendu d’un texte est toujours de meilleur qualité via une police spéciale, on peut ainsi véhiculer une image précise et surtout se créer un style particulier ! On peut espérer de la part de Google également des update en continu.

    Répondre
  18. Je ne peux que recommander l’utilisation de ces polices. Il faut être honnete, c’est un gain de temps considérable et tout est gratuit. Il y a vraiment de quoi embellir un site facilement. Je recommande de les uploader sur votre site pour éviter d’aller faire des requetes trop nombreuses sur le serveur google ! Merci pour les autres conseils !

    Répondre
  19. Très bon article, je vais essayer de le mettre en place sur mon site d’actu
    sur la Paapoonaisie – http://clic-actu.com/

    Une question, cela a-t-il une valeur en référencement?

    Répondre
    • Bonjour,

      Oui, le chargement de trop de police ralentit le site et pénalise le référencement. Limitez à 2 maxi !

      Répondre
  20. Salut,

    J’ai le problème suivant : nous avons décider de créer un site web en ssh, donc avec le https. Malheureusement, les fontes google sont publiées sous http classique, il n’y a donc pas moyen de la charger sur notre site (le ssh la bloque comme contenu non sûr).

    Y a-t-il une alternative ?

    Répondre
    • Bonjour,

      Il faut chercher du coté de chez google web font, voir comment appeler leurs ressources en https. Ca doit être possible. Sinon vous téléchargez la police sur votre serveur, là ça marchera à coup sûr.

      Répondre

Trackbacks/Pingbacks

  1. Google Web Fonts en 5 conseils pratiques [Article invité] - Les Doigts dans le Net | Votre site avec Wordpress | Scoop.it - [...] Présentation de Google web Font par Ronan du blog Masterclassduweb, 5 conseils pratiques pour bien l'utiliser  [...]
  2. URL - ... [Trackback] [...] Read More: lesdoigtsdanslenet.com/article-ronan/ [...]

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint