Intégration des polices Google dans le site Wordpress

click fraud protection

Google Fonts est devenu la ressource incontournable pour la typographie Web personnalisée depuis son développement en 2010. Il y a trois raisons principales pour lesquelles Google est devenu le leader ici. Premièrement, il n'y avait pas de services de polices assez décents, alors Google a comblé le vide. Deuxièmement, même au début, la variété offerte était relativement grande. Actuellement, il existe plus de 800 polices disponibles dans de nombreux styles. Troisièmement, ces polices sont disponibles gratuitement, ce qui les rend particulièrement attrayantes.

De plus, ils sont étonnamment faciles à intégrer dans vos projets de conception. Nous allons vous montrer comment inclure ces polices Google dans votre site WordPress.

Polices Google

Pour commencer, vous devrez sélectionner la police avec laquelle vous souhaitez travailler. Il existe une variété d'options, vous avez donc le choix entre un menu assez large. Vous pouvez les trouver en vous rendant sur La page des polices de Google. Si vous recherchez une police spécifique, tapez simplement le nom de la police dans la zone de recherche et vous obtiendrez un exemple.

Il existe également d'autres paramètres de recherche que vous pouvez utiliser. Juste en dessous de la zone de recherche se trouve un bouton appelé Catégories. Si vous cliquez dessus, un menu déroulant avec cinq options apparaîtra. Ce sont les suivants :

  • Serif - Ce sont des polices avec des lignes courtes provenant des traits supérieurs et inférieurs d'une lettre. Times New Roman et Sylfaen sont de bons exemples.
  • Sans Serif - Comme son nom l'indique, ce sont des polices sans ces petites lignes. Ils ont tendance à avoir une esthétique simple et propre.
  • Affichage – Ce sont ce que l'on peut appeler des polices qui attirent l'attention. Ils conviennent mieux aux en-têtes qu'aux longs textes.
  • Écriture manuscrite – Ces polices donnent l'impression que quelqu'un les a écrites à la main. Vous constaterez que beaucoup sont en cursive ou ont un espacement moins cohérent.
  • Monospace – Comme une machine à écrire, leurs lettres occupent la même largeur horizontale. Ils sont très régulièrement espacés.

En plus de celles-ci, vous avez également le choix entre d'autres options, telles que la sélection des propriétés de la langue et de la police. Ce dernier comprend le nombre de styles, l'épaisseur, l'inclinaison et la largeur.

Intégration de polices dans WordPress

Si vous souhaitez inclure ces polices uniques dans votre site WordPress, vous pouvez essayer plusieurs méthodes.

Utiliser CSS

Cliquez sur la police de la sélection de Google, et cela vous mènera à la page de police détaillée. Dans le coin supérieur droit, il y a un signe "+". Cliquez dessus et une fenêtre latérale s'ouvrira. Cliquez sur « Intégrer ».

Vous pouvez maintenant cliquer @importer. Cela ouvrira le code CSS que vous devez copier. Accédez à la feuille de style de votre thème WordPress et collez-la au début. Assurez-vous d'avoir copié le lien d'importation sans le  crochets. Assurez-vous d'enregistrer et vous aurez ajouté la police.

Utiliser PHP

Suivez les premières étapes et copiez le lien que vous obtenez après avoir cliqué sur le signe "+". Maintenant, ajoutez-le simplement au fichier header.php de votre thème. N'oubliez pas de sauvegarder pour que la police soit ajoutée.

Utiliser une fonction Javascript

Vous pouvez également essayer quelque chose appelé "mise en file d'attente". Vous devrez utiliser la fonction wp_enqueue_style pour cela. Grâce à cette méthode, vous pouvez ajouter la police choisie à la section d'en-tête de toutes les pages de votre site Web. C'est un excellent moyen d'ajouter plusieurs modifications à la fois.

Récupérez simplement le lien de la police (de http jusqu'au ”), et ajoutez-le au fichier functions.php de votre thème avec du code supplémentaire autour. Voici le code que vous devrez utiliser :

fonction custom_add_google_fonts() {

wp_enqueue_style( 'custom-google-fonts', https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, faux );

}

add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );

N'importe laquelle de ces options fonctionnera parfaitement pour intégrer les polices Google dans votre site Web WordPress, il est donc important de choisir celle avec laquelle vous vous sentez le plus à l'aise.