De jolies polices pour votre site web

Vous cherchez de jolies polices pour votre site web ? Il existe plusieurs méthodes pour afficher des polices différentes des « Web Safe Fonts » traditionnelles. Et c’est encore Google qui nous fournit les meilleurs polices gratuites open source.

Il existe bien d’autres solutions, des meilleurs (payantes) et des moins bonnes, mais Google Webfonts reste la solution la plus rapide à mettre en oeuvre pour remplacer des polices dans votre site web.

Une jolie police pour votre site Web !

Il vous suffit de choisir votre police dans une interface qui ressemble à Dafont puis de cliquer sur « Quick Use ».

Ajouter le code HTML d’appel de la police dans votre <HEAD> et changez le code CSS de votre police à modifier. Et HOP le tour est joué vous avez maintenant de belles polices sur votre site web.

Ne mettez pas vos paragraphes <P> avec des polices Google Webfonts mais limitez vous au titre de niveau <H1> ou <H2>. Ceci évitera que vos pages HTML se chargent trop lentement.

11 réflexions au sujet de « De jolies polices pour votre site web »

  • Effectivement, moi aussi j’utilise Google pour les polices open source, il y a un grand choix et les polices proposées sont plutôt de qualité !

  • J’ai bien creusé la doc et finalement l’impact devrait être assez limité. Même si on ne peut pas trier les polices par taille (en kb), il y a un indicateur d’impact affiché en fin de sélection. Et on peut en effet limiter considérablement l’impact sur le temps de chargement des pages en n’utilisant les polices que pour un nombre limité de caractères. Ceci dit, si tous les H1 et H2 du site sont dans une police donnée, toute la police sera finalement téléchargée, et en plusieurs requêtes. Dans ce cas, il vaut sans doute mieux télécharger la police d’un coup. Et dans ce cas, se limiter à du H1/H2 n’a pas de sens. On pourrait aussi bien faire le choix de changer la police de son texte. Il faut juste avoir à l’idée que l’impact n’est pas absolument nul. Mais celui de mettre une image pour aérer le texte non plus… En définitive, ça me semble vraiment être un net progrès sur Cufón et Sifr.

    Le manuel Google note d’ailleurs que les polices seront mises en cache par le navigateur. Il s’agit donc bien d’un chargement unique par visiteur (voire déjà effectué ailleurs si la police est assez courante et que Google Webfonts prend bien).

    Je regrette juste que Google ait décidé de se lancer avec un objectif immédiat de mettre à notre disposition des centaines (milliers ?) de polices au lieu de commencer un peu plus modestement. Polices qu’il aurait été facile d’intégrer par défaut dans les installations de Chrome et en négociant de Firefox, Opera… Internet Explorer ?? Et qui auraient été rapidement cachées par tout surfeur un tant soit peu actif sur le web…

  • C’est la deuxième fois que je tombe dessus aujourd’hui. La fusion entre l’esthétique de la typographie papier et la praticité web paraît tentante mais j’ai eu quelques déconvenues avec ses premières émanations. Concrètement qu’est-ce que ça vaut par rapport à des solutions type Cufón et Sifr ? Ces deux solutions sont parfaitement esthétiques mais très lourdes et totalement déconseillées pour autre chose que les titres. Vous semblez penser la même chose, ce qui est contradictoire avec ce que j’ai trouvé avec un article US très complet (http://webdesign.tutsplus.com/articles/typography-articles/a-web-designers-guide-to-font-replacement-methods/). Rien de précis dans la docu Google. J’ai (presque) eu l’impression que la police était téléchargée en cache et que finalement entre l’utiliser une fois pour un titre et pour toute une page, aucune différence. Vous avez une bonne source là-dessus ?

  • L’énorme avantage de cette solution plutot que d’utiliser Cufon ou Sifr, c’est que la police est en cache, mais depuis les serveurs de Google, et non depuis le site où la font est utilisée.

    Concrètement, cela signifie que plus il y aura de site à utiliser les font de Google, plus la probabilité sera forte qu’un internaute ait déjà en cache les font utilisées dans un site.

    De façon similaire à ce qu’il se passe déjà sur le même principe pour les librairies JS.

  • Super, je ne connaissais pas cet outil, en même temps cela ne m’étonne pas de Google.
    Un large choix en effet, je charcahis justement…

  • Je vais peut-être voir si je vais l’utiliser sur le site de la bijouterie Greubel.
    Ça peut être pas mal qu’en pense-tu ?

    Niveau chargement, il y a quelque lenteurs peut-être :/

  • Bonjour
    J’avais essayé mais cela ne rendait pas pareil sur tous les navigateurs, certains affichaient d’autres polices. Comment préciser une autre police de sécurité qui soit web safe ?

Laisser un commentaire

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