Devenez votre propre Webmaster

Google Web Fonts pour rendre votre site plus unique

Google Web fontsVous avez sans doute déjà rencontré des sites web qui utilisent des fontes originales. On vous a pourtant toujours dit qu'implanter une font était compliqué, qu'il fallait la créer dans le CSS avec la commande "font-face". De plus Internet explorer, encore trop utilisé, ne gère pas bien cette option CSS avant la version 9.0, comme a son habitude.

Et si je vous disais que pour obtenir une fonte originale, qui fonctionne avec tous les navigateurs Internet, il vous suffit de choisir la fonte souhaitée sur Google Web Fonts et qu'un simple copier/coller dans l'entête de votre site (header) et une utilisation normale dans votre CSS de cette fonte suffit.

Qu'est-ce que Google Web Fonts ?

Dans l'optique de rendre les sites Internet plus beaux, dixit Google himself, Google a mis à la disposition des webmaster une bibliothèque de 629 familles de fontes et qui s’agrandit continuellement.

Le but étant de faciliter la vie aux webmaster et de rendre l'utilisation de ces fontes compatibles avec tous les navigateurs Internet, même le boulet du WEB Internet Explorer 😉

L'avantage de Google Web Fonts, est que ce n'est pas aux ressources de votre serveur de charger la fonte, mais aux serveurs de Google dont on connait la fiabilité et la rapidité. Je reviendrais sur la rapidité de chargement des fontes un peu plus loin. Mais le fait d'utiliser les ressources des serveurs Google est réellement un plus aux heures de pointes, surtout si vous utilisez un hébergement mutualisé.

Comment utiliser Google Web Fonts ?

Sélectionnez votre fonte dans Google Web Fonts

L'adresse de Google Web Fonts est facile à retenir, c'est Google avec "fonts" à la fin 😀 . https://www.google.com/fonts/.

 Google Web Fonts

Une fois sur le site, sélectionnez la fonte qui vous intéresse en utilisant les filtres mis à votre disposition dans le menu de gauche de la page. La fonte sélectionnée cliquez sur le lien "Quick use" Google Web Fonts - Lien Quick Use

Ne ralentissez pas inutilement votre site

Rapidité de Google Web FontsUne fois que vous aurez cliqué sur le lien "Quick-use" vous aurez accès à une information importante sur l'utilisation de la fonte sélectionnée. Un compteur à droit vous indique la rapidité de chargement de la fonte sélectionnée.

Ne ralentissez pas votre site inutilement. Personnellement, si le compteur indique plus de 45Ko, je ne choisis pas la fonte. D'autant plus si la fonte ressemble beaucoup aux fontes standards. Dans ce cas je préfère utiliser les arguments de transformation de CSS comme le "font-weight", le "test-transform" et "letter-spacing".

Mettez un point d'honneur à toujours faire attention à la vitesse de votre site. C'est un point important dans le référencement de votre site. Google a estimé que si le chargement de ses pages passait de 1/10s à 1/2s il perdrait 30% de ses internautes ... et là on parle de Google !!!

Implémentez la font dans votre site

Implémentez le chargement de la fonte dans le header de vos pages

En bas de la page vous avez la totalité de ce dont vous avez besoin pour l'implémenter sur votre site Web.

Google Web Fonts - implémenter dans le hearder des page

Il vous suffit de copier la ligne, soit en import standard, soit en import dans le CSS ou encore par un javascript. Je vous conseille le javascript qu'en cas de dernier recours, car plus lent.

Pour la version d'implémentation affichée dans l'image juste au-dessus, il vous suffit de coller cette ligne entre les bornes <head></head> des pages du site. Si vous possédez plusieurs header différents, ne copiez la ligne que dans les header des pages qui utiliseront la fonte. Évitez de ralentir les autres pages inutilement.

Pour les webmasters de sites développées avec WordPress

Il vous suffit de vous rendre dans le menu "Apparence" puis "Éditeur" et d'ouvrir le fichier "entête" (header.php) ou l'entête des pages qui utiliseront la fonte si vous avez plusieurs entêtes de pages.

Ensuite collez la ligne par exemple juste avant le "</header>". N'oubliez pas de sauvegarder le fichier.

Implémentez la font dans la feuille de style

Enfin copiez la ligne en bas de la page de Google Web Fonts :

Google Web Fonts - implémentation dans le CSS

Implémentez cette ligne en ajoutant d'autres fontes comme "Arial, sans-serif" avant le point virgule de la ligne, enfin, selon la typographie de votre site. L'ordre de chargement des fontes est celui indiqué sur les lignes "font-familly" de votre css. Si la première fonte ne peut être chargée pour une raison ou une autre, c'est la seconde qui est chargée et ainsi de suite. Sachant que les fontes "Arial" et "sans-serif" sont nativement embarqué sur les PC ou Machintosh.

Si jamais vous ne voyez pas la fonte apparaitre sur les pages de votre site après l'avoir implémenté, pensez à vider le cash de votre navigateur Internet.(Ctrl + Maj + Suppr) puis recharger votre page.

Pour les webmasters de sites développées avec WordPress

Il vous suffit de vous rendre dans le menu "Apparence" puis "Éditeur" et d'ouvrir le fichier "feuille de style" (style.css) et d'implanter la fonte pour les éléments de votre typographie où vous souhaitez que la fonte soit affichée. Par exemple dans le "titre 1" de vos pages (h1)

#content h1{
      font-familly:'Caesar Dressing', arial, sans-serif;
      font-size: 24px;
      color: #FFF00FF;
 }

N'oubliez pas de sauvegarder le fichier.

Pour finir quelques conseils

Comme je vous l'ai dit plus haut, favorisez les options CSS tel que font-weight, le test-transform ou letter-spacing, avant d'implanter une fonte qui n'est pas native et qui ralentira forcément le chargement de vos pages.

N'abusez pas du nombre de fontes. Prenez en une, deux maximum, par page. Au-delà, déjà votre site ressemblera plus au blog d'un adolescent qu'à un site professionnel, mais surtout gardez en mémoire qu'à chaque fois que vous ajoutez une fonte vous ralentissez votre site, ce qui est déconseillé.

Posts Similaires
Ouvrir les liens des commentaires WordPress dans une nouvelle fenêtre

Ne perdez plus de visiteurs. Ouvrez les liens des commentaires Wordpress dans une nouvelle fenêtre. Les liens qui ne pointent pas vers votre site s'ouvrent dans une nouvelle fenêtre en ajoutant une fonction dans le fichier functions.php

Comment créer un site Internet avec wordpress ?

Je vous propose de vous apprendre comment créer un site Internet avec le CMS wordpress. Vous verrez qu'il est facile de le faire, que cela ne demande pas de connaissances très approfondie en informatique

Installer votre site ou votre blog avec WordPress en 3 étapes

Cet article vous apprend à installer votre site Internet ou votre blog avec Wordpress, en cinq minutes. Même sans être expert Internet, cette installation est d'une telle simplicité, que tout le monde peut le faire et créer son blog en 5 minutes.

A propos de

Consultant en informatique et concepteur de sites Internet.

Il a travaillé pendant plus de quinze ans pour une multinationale dans le secteur de l'ingénierie Informatique.

Durant ces années, il a participé à des projets sur les systêmes de facturation et la conception des sites Internet de différentes Banques et opérateurs téléphonique à travers le monde

Senior Analyst Programmer/Team Leader, il a participé et dirigé des projets sur les plus gros clusters d'Europe.

Il habite à Paris, en ile de France .

Le Site :

Le Blog :

Vos Commentaires pour "Google Web Fonts pour rendre votre site plus unique"