Reçois gratuitement une formation complète

sur le référencement !


Reçois tout de suite un livre de 45 pages pour tout savoir sur le référencement et sur l'écriture d'article pour le référencement
Valider la politique de confidentialité

Google Web Fonts pour rendre votre site plus unique

Ecrit par Benoit Thibaudeau dans Trucs & Astuces | 0 commentaires |

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.

[astuce]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.[/astuce]

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é.


L'article vous a-t-il aidé ?

Votre vote : 0 étoile(s)
Tags: , , ,

Portrait de Benoit Thibaudeau
Benoit Thibaudeau
1971-11-02
2020-01-12
Webmaster

Après une courte carrière en tant que cryptographe, j'ai été team leader chez un éditeur de logiciel qui créé des systèmes décisionnels pour les banques et les télécoms dans le monde entier.

Puis j'ai évolué vers architecte de système informatique, ce qui m'a amené à concevoir des systèmes parmi les plus gros d’Europe avec une visibilité sur les 10 prochaines années.

En parallèle j'étais chargé de la formation des employés de la société et de celle des clients, ce qui m'a appris beaucoup en ce qui concerne la dispense de cours.

Durant ma période en Irlande j’ai eu la chance de travailler, plusieurs mois, en étroite collaboration avec Google Irlande, ce qui m’a appris énormément sur le référencement.

Enfin, j’ai souhaité au bout de 15 ans d’arrêter de voyager tout le temps dans le monde entier, je me suis donc mis à mon compte et aujourd’hui je vis de mon activité.

Benoît Thibaudeau

Les conseils Internet : www
Pour me contacter :
Mr. Benoit Thibaudeau
27 bis rue Louis Rolland
92120 Montrouge,
Haut de Seine - FRANCE
Les stages photo : www
Cours photo sur Internet : cours
Le blog de tuto photo : Blog
Le site dream photos : www
Le blog dream photos : Blog

Laisser une réponse

Votre adresse email ne sera pas publiée.

Vous pouvez utiliser ces HTML balises et attributs: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

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

Afficher
Cacher
error

Vous aimez ce blog? Passez le mot :)