4 outils pour tester les Google Fonts

Vous aimez ? Partagez !

fonts2Le répertoire sans cesse augmenté des Google Fonts a très largement contribué à simplifier l’utilisation de polices de caractères autres que les polices conventionnelles dites « safe » sur nos sites et blogs.

Reste la difficulté à choisir une ou plusieurs polices de caractères dans une liste qui en compte aujourd’hui plus de 600… pas évident !

C’est là que les outils que je vous présente aujourd’hui peuvent vous aider à faire des choix pertinents sans perdre trop de temps à tester une à une les polices qui vous plaisent en modifiant à chaque fois votre code source (ou les réglages de votre plugin plus les réglages de taille des caractères…).

1. Best Web Fonts : ce site vous permet de prévisualiser les Google Fonts au niveau d’un titre, d’un paragraphe, d’une liste à puces, dans différentes tailles, avec différents effets.

Il suffit de sélectionner une police de caractères dans la liste déroulante qui se trouve à droite de la page et de jouer avec les boutons d’effets qui se trouvent sous le titre principal.

Tout en dessous, vous trouverez les codes à insérer dans le code source de vos pages Web : le plus simple à utiliser est le code « Standard » qu’il faut placer dans la section « head » sans oublier de modifier la police de caractères choisie dans la feuille de style CSS avec le code « Font css ». Pour intégrer les effets dans votre feuille de style, utilisez le code « Effect css ».

best-web-fonts

***

2. Type Wonder : ce site vous permet de tester en live une police Google sur n’importe quel site ou blog.

Il suffit d’inscrire l’URL du site que vous voulez tester et de cliquer sur « Go! ». Une fenêtre s’ouvrira alors pour que vous choisissiez la police que vous voulez tester. Cliquez sur la police de votre choix et ensuite sur « Use! ».

L’application va mouliner pendant quelque secondes avant d’afficher votre site avec la police que vous avez sélectionnée. En haut de la page, vous verrez des boutons qui vous permettent de changer de police (« Change font »), d’obtenir les codes utiles (« Get code ») et de partager le site ainsi modifié (« Share »). En cliquant sur le bouton « Enabled », vous revenez à l’état « normal » du site que vous testez.

Ça fait un drôle d’effet de voir son site ainsi transformé, mais pas de panique, ce n’est qu’une simulation ! Respirez, votre code source n’a pas été modifié et votre feuille de style est intacte !

Les modifications réelles, une fois que vous aurez arrêté votre choix, ce sera à vous de les faire en utilisant les lignes de code qui vous sont fournies (voir plus haut).

type-wonder

***

3. Google Font Previewer : voilà une extension pour Chrome qui vous permet de visualiser n’importe quel site avec la police Google de votre choix.

Après installation de l’extension, une petite icône est disponible en haut à droite de votre navigateur, il suffit de cliquer dessus lorsque vous visitez un site pour accéder à l’interface où vous allez choisir une police avec ses différents attributs.

C’est donc le même principe que pour l’outil précédent, sauf que ça vous demande d’installer une extension supplémentaire dans votre navigateur.

À voir si l’usage de cette extension est pertinent pour vous en fonction de vos activités en matière de webdesign, peut-être vaut-il mieux ne pas encombrer votre navigateur avec une extension qui ne vous servira qu’une ou deux fois par an… 😉

google-font-previewer

***

4. Font Changer with Google Web Fonts : une autre extension pour Chrome qui permet de modifier les polices de caractères de tous les sites que vous visitez. « Modifier » en termes de visualisation seulement, bien entendu !

À l’inverse des autres applications, ici on ne vous donne pas les lignes de code à insérer dans vos codes sources et feuilles de style, il s’agit juste de pouvoir afficher les sites que l’on visite avec d’autres polices de caractères.

Un outil sympa qui peut permettre de profiter des Google Fonts sans se prendre la tête avec du code… mais ça reste bien sûr un « plaisir solitaire » puisque ce que vous affichez grâce à l’extension ne vaut que pour vous.

Lorsque vous souhaitez revenir à l’état « normal » du site que vous avez modifié avec l’extension, il suffit de décocher les cases cochées dans la boîte de dialogue de l’extension.

font-changer

***

Si vous n’êtes pas trop aguerris pour savoir utiliser les lignes de code fournies, je vous renvoie à mon petit guide gratuit qui vous donne les indications basiques nécessaires.

***

separator

  1. Jean-Louis
    Jean-Louis09-15-2013

    Bonjour Alex,

    On sent bien ici la passionnée de polices de caractères « hors des sentiers battus », non ?

    Alors, j’ai une question : que penses-tu de la police sur Végétarisme et santé ? Et une autre : jugerais-tu utile de la modifier ?

    Bien entendu, si c’est faisable avec mon thème…

    Merci par avance pour ta réponse.

    Bien à toi,

    Jean-Louis
    Jean-Louis Mon dernier article… Adaptogène et plantes adaptogènesMy Profile

    • Alexandra
      Alexandra09-16-2013

      Hello Jean-Louis (deux commentaires aujourd’hui, tu me gâtes !),

      ahhh oui… passionnée de typographie, de calligraphie… tu l’as dit ! C’est un univers à part entière, très complexe, très spécialisé, très technique, et je manque cruellement de temps pour fouiller encore plus loin que ce que j’ai déjà fait et pour venir en parler ici.

      Et face à une telle diversité, je m’étonne que si peu de gens s’y intéressent parmi ceux qui publient sur Internet, sauf les designers évidemment pour qui la typographie est pleinement intégrée dans une démarche esthétique.

      Le lettrage est beaucoup plus qu’un élément « utilitaire » qui ne viserait qu’à rendre un texte lisible, il véhicule aussi une émotion, une personnalité… les choix typographiques constituent un message à part entière, bien avant les mots.

      Par rapport à ton blog, je crois me souvenir que tu avais utilisé la police Philosopher pendant un temps, non ? Et là, on dirait que tu es revenu sur quelque chose qui pourrait bien être du Trebuchet MS ? Personnellement, parmi les sans-serif basiques, c’est ma préférée et je l’utilise toujours avec plaisir.

      Pour répondre à ta question de savoir si je juge utile de changer de police sur ton blog, sur un plan « utilitaire », je dirais que non, mais sur un plan « sensible », je dirais que toi seul peux répondre… c’est selon ton envie en fait !

      Enfin, sur un plan technique, il n’y a aucune raison pour que ton thème n’accepte pas un changement de police, car de nombreux plugins se sont développés dernièrement (j’ai un petit article récent là-dessus), et au pire, si aucun plugin ne fonctionne, tu peux intervenir sur le code source de ton thème (j’ai développé ça dans mon programme Web Fonts, tu dois l’avoir quelque part). 🙂

      Amitiés,
      Alexandra
      Alexandra Mon dernier article… 4 outils pour tester les Google FontsMy Profile

  2. Jean-Louis
    Jean-Louis09-17-2013

    Bonjour Alex,

    Merci pour ta réponse, comme toujours claire et détaillée, en bref que j’aime bien 🙂

    Bon, n’étant pas + royaliste que le roi, comme tu aimes bien ma police et qu’elle ne m' »interpelle » pas en terme d’esthétique, je me la garde.

    D’autant que je suis en train de virer un max de plugins, et que j’ai suffisamment de « sensibilité » avec les autres pour ne pas aller chercher d’autres « ennuis » en tripotant le code 😉

    Bien amicalement et à bientôt,

    Jean-Louis
    Jean-Louis Mon dernier article… Breaking newsMy Profile

    • Alexandra
      Alexandra09-17-2013

      Ha ha oui, c’est effarant la quantité de plugins qui s’accumulent avec le temps ! C’est pas mal de dépoussiérer de temps en temps pour ne garder que ceux qui nous servent vraiment.

      Pour ma part, je recherche de plus en plus des solutions un peu « tout en un », genre thème WP avec des fonctionnalités évoluées qui permettent de se passer de plusieurs plugins. J’ai récemment acquis quelques thèmes drôlement bien conçus, qui vont pouvoir me servir pour des clients et des formations, c’est chouette. 😉

      Au final, ça fait moins de bazar (conflits potentiels et autres), ça fait moins de temps passé sur les mises à jours, et surtout, ça fait moins de failles (possibles) de sécurité. 🙂

      Bon alors… bon courage pour ton « nettoyage d’automne » !

      Alexandra
      Alexandra Mon dernier article… 4 outils pour tester les Google FontsMy Profile

  3. Creditpolis
    Creditpolis12-18-2013

    Quel est la font la plus lisible du web ?

    • Alexandra
      Alexandra12-19-2013

      Bonjour à nouveau Creditpolis,

      la font la plus lisible du Web n’existe sans doute pas, mais on a coutume de dire que ce sont les polices dites sans-serif (Arial par exemple) qui sont les plus lisibles sur une page Web.

      Maintenant, il existe des centaines de contre-exemples… une très belle police avec empattements peut aussi convenir, il faut surtout se préoccuper de la taille d’affichage de la police et de son taux de contraste avec le fond sur lequel elle s’affiche.

      Amicalement,
      Alexandra
      Alexandra Mon dernier article… Supprimez le fond de vos images facilementMy Profile

  4. Tine
    Tine01-03-2014

    quelle chance d’être tombée sur cet article ; je cherchais à changer la police des titres de mon site ; j’ai compris le principe mais ne sais pas encore où incorporer le code, c’est à suivre ; en tout cas merci pour cette astuce autant que pour les autres 😉
    Tine Mon dernier article… carte de voeuxMy Profile

Laisser une réponse

CommentLuv badge

Ce blog utilise CommentLuv Premium qui vous autorise à associer des mots-clés à votre nom si vous avez effectué 3 commentaires approuvés. Utilisez votre vrai nom puis @ et vos mots-clés (maximum de 5).

Ce site utilise Akismet pour réduire les indésirables. Apprenez comment les données de vos commentaires sont utilisées.