Comment installer Google Fonts sur votre site WordPress

WordPress

Google Fonts est une excellente ressource pour les utilisateurs de WordPress, puisqu’elle donne instantanément à votre site Web un nouvel aspect en changeant la typographie de ses pages. Google offre gratuitement plus de 600 polices différentes. Nous vous montrerons ici comment ajouter les polices de votre choix à votre site.

Ajouter des polices manuellement

Ajouter manuellement des polices Google Fonts à votre thème est certainement l’option la plus difficile; si vous n’êtes pas à l’aise avec le code, vous devriez omettre cette section et passer à l’installation du module d’extension. Cependant, si vous aimez travailler au fonctionnement interne de votre site, voici comment ajouter des polices de façon manuelle.

Pour commencer, allez à Google Fonts et naviguez parmi les polices offertes. Quand vous en aurez trouvé une qui vous plaît, cliquez sur l’icône Quick-use et descendez à la section Add this code to your website.

Vous y trouverez trois façons d’ajouter la police que vous avez choisie à votre site. Standard, @import, et JavaScript. Vous pouvez éliminer l’option JavaScript puisque les deux premières sont bien meilleures.

@import est la plus facile des méthodes. Elle consiste à copier le code de la police à partir de Google et le coller dans le fichier style.css de votre site. Le code ressemblera à ceci :

@import url(http://fonts.googleapis.com/css?family=Revalia);

La méthode @import peut affecter la vitesse de votre site et le temps de chargement des pages. Si cela vous pose problème, le code standard sera probablement la méthode que vous préfèrerez.

Le code standard ressemblera à ceci :

<link href='http://fonts.googleapis.com/css?family=Revalia' rel='stylesheet' type='text/css'>

Vous devez placer ce code dans l’entête de votre thème, en le collant au-dessus de la feuille de style principale dans votre fichier header.php.

Ajouter des polices avec un module d’extension

Comme dans la plupart des cas avec WordPress, la meilleure façon d’ajouter des polices Google Fonts à votre site Web est d’utiliser un module d’extension. Il y a plusieurs modules d’extensions qui peuvent vous aider à le faire, mais nous vous recommandons Google Typography. Vous pouvez télécharger ce module d’extension en allant à Extensions > Ajouter et en tapant « Google Typography » dans le champ de recherche.

Après avoir installé et activé le module d’extension, vous pouvez visiter la page de configuration de Google Typography pour prévisualiser les polices. Il est cependant plus facile de visiter la bibliothèque Google Fonts et choisir votre police à partir de là.

Quand vous aurez trouvé la police que vous désirez, allez à Apparence > Typography > Add New et choisissez-la à partir du menu déroulant intitulé Font Family. Sélectionnez maintenant la couleur de la police et entrez « * » dans la zone de texte intitulée CSS selectors.

Cliquer sur Save pour confirmer les changements.

Visitez la page d’accueil de votre site et rafraichissez-la. Votre site devrait maintenant être affiché avec votre nouvelle police.

Notre recommandation pour Hébergement WordPress

WordPress

Rapidenet.ca
Obtenez un rabais de 60% en utilisant notre lien.

rapidenet.ca

Hébergeur Web fiable avec un excellent service à la clientèle et une installation WordPress en un clic. C'est notre recommandation pour héberger un blog WordPress. L'hébergement WordPress de RapideNet offre les avantages suivants :
  • - Disques SSD NVMe
  • - Serveurs ultra performant
  • - Plugin d'optimisation pour WordPress

4 réflexions sur « Comment installer Google Fonts sur votre site WordPress »

  1. Gary

    Bonjour,

    Lorsque je colle le code Import dans ma feuille de style, j’obtiens le message d’erreur « @import not allowed here ».

    A quoi cela est dû et comment y remédier ?

    Cordialement.

    Répondre
    1. HW Auteur de l’article

      Vous le collez où dans le fichier? Essasez de le coller au début du fichier après la section des commentaires avant le reste du code de votre fichier CSS.

      Répondre

Laisser un commentaire

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