Utiliser Google Web Font sous WordPress

Google Web Font sous WordPress

Utiliser Google Web Font sous WordPress s’effectue en 5 étapes. Relativement simple, il est accessible à tous, même pour ceux qui ne possèdent pas de compte Google.

 

Qu’est-ce que Google Web Font ?

Google Web Font est un site Internet proposé par Google, permettant d’ajouter plus facilement des polices d’écriture à votre site Web. En effet, par défaut les navigateurs Web prennent en compte 9 polices d’écriture qui sont : Arial, Georgia, Helvetica, Lucida, Palatino, Tahoma, Times, Trebuchet et Verdana.
Sans Google Web Font, ajouter des polices d’écriture personnaliser peut vite devenir un vrai casse-tête:

Premier problème, il existe plusieurs formats de fichier pour les polices d’écriture, et les navigateurs Web prennent en en charge qu’un seul formats de fichiers et bien entendu de l’un à l’autre ce n’est pas toujours le même format qui est supporté. Par conséquent, il faut pas moins de 4 fichiers pour que la police d’écriture personnalisé s’affiche correctement sur tous les navigateurs. Sans compter le fichier JavaScript pour les version d’IE6 et IE7.

Second problème, est que c’est fameux fichiers seront hébergé sur votre serveur xAMP, plus précisément dans un dossier situé à la racine du thème actif. Lors du téléchargement de la page, le navigateur devra également télécharger la police d’écriture. Avec une connexion Internet 3G ou bas débit cela ralentis l’ouverture de la page.

C’est pour pallier à ces problèmes que Google à mis en place Google Web Font. Le site héberge une galerie de 629 polices d’écriture à ce jour.Avec ce concept on sélectionne sa/ses police(s) d’écriture et on ajoutez les lignes de codes adéquate dans le fichier CSS.Le téléchargement de la page est moins long car il s’effectue en parallèle sur les serveurs Google pendant que votre navigateur charge la page de votre site.

Rendez-vous sur la page d’accueil de Google Web Font, puis choisissez une police de caractère.

Google Web Font sous WordPress-2

Dans cet exemple c’est la police Chango qui sera utilisé. Cliquez sur le bouton Quik-use en bas à gauche de la police d’écriture (ici case orange).

Dans les étapes 1 et 2 permettent modifier quelques paramètre de la police d’écriture. Ces réglages diffèrent quelques peut d’une police à l’autre.

Dans l’étape 3 se trouve une ligne de code HTML semblable à celle-ci:

Ouvrez le fichier <strong>header.php</strong> de votre thème et dans le bloc <strong>head</strong> àjouter cette ligne de code :


Dans l’étape 4 se trouve une ligne de code CSS semblable à celle-ci:

font-family: 'Chango', cursive;

Cette ligne de code sera à ajouter dans le/les fichiers CSS de votre thème. Dans l’example ci-dessous la police Chango sera utiliser pour les balises H1 :

h1 {

font-family: 'Chango', cursive;

}

Comme toute police d’écriture, il sera possible de changer la couleur, la taille, mettre en gras, italique, souligné…

Leave a Reply