le API Google Fonts Webfonts vous permet de charger facilement des polices personnalisées (par opposition aux polices de bureau standard comme Arial, Georgia, Times New Roman ou Helvetica) simplement en référençant une feuille de style dans la balise d’en-tête de votre site. Si vous développez des thèmes WordPress et souhaitez personnaliser les polices de votre site sans utiliser de plugin, vous pouvez facilement mettre en file d’attente des polices Google personnalisées sur votre site pour les utiliser dans votre CSS.
Étape 1 : Sélectionnez votre police Google personnalisée
L’utilisation des polices Google est très simple. Si vous vous dirigez vers la page principale à « Polices Web Google » et cliquez sur n’importe quelle police, une petite fenêtre contextuelle apparaîtra afin que vous puissiez ensuite personnaliser la police et afficher l’URL correcte pour la police CSS.
Si vous créez un site HTML simple ou si vous modifiez votre thème WordPress personnalisé personnel, tout ce que vous avez à faire pour charger la police personnalisée sur votre site Web est de copier et coller le lien de la feuille de style vers la police personnalisée hébergée sur Google dans votre
tag (situé dans header.php dans WordPress).
Cela dit, la manière préférée d’ajouter la police Google à votre thème WordPress (très important lors de la création de thèmes pour la distribution) est d’utiliser WordPress wp_enqueue_scripts crochet d’action.
Étape 2 : mettez votre police Google en file d’attente
Comme mentionné précédemment, vous pouvez facilement déposer le code de Google dans votre fichier header.php, cependant, il est préférable de mettre le script en file d’attente via le crochet d’action comme indiqué précédemment. Cela permet de modifier plus facilement le thème enfant et évite également les conflits avec les plugins tiers.
Étape 1: Pour commencer, collez le code suivant dans votre fichier functions.php (si ce fichier n’existe pas, créez-en un nouveau dans le dossier de votre thème et assurez-vous que le code ci-dessous est collé dans les balises php.
function myprefix_enqueue_google_fonts() {
wp_enqueue_style( 'roboto', 'https://fonts.googleapis.com/css?family=Roboto' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_google_fonts' ); Dans cet extrait particulier, nous avons utilisé le wp_enqueue_style fonction pour charger la police Google « Roboto » sur le site Web. Cependant, vous pouvez utiliser cette fonction plusieurs fois pour charger plusieurs polices.
Étape 2: Il vous suffit maintenant d’ouvrir votre fichier style.css et de modifier le nom de la police pour les éléments pour lesquels vous souhaitez la police personnalisée ou d’ajouter du CSS personnalisé à votre site pour modifier la police, comme dans l’exemple suivant pour modifier la police du corps entier en Roboto .
body { font-family: "Roboto"; }Extra : Utilisation d’un plugin WordPress Google Fonts
Bien sûr, si vous ne développez pas de thème pour la distribution ou si vous n’utilisez pas de thème enfant pour votre projet, il peut être préférable d’utiliser un plugin personnalisé pour ajouter des polices à votre site. Dans l’article intitulé « Améliorez la typographie de votre site Web WordPress avec Google Fonts », nous vous recommandons quelques plugins géniaux qui vous permettront de modifier facilement les polices de votre site WordPress et plus particulièrement en utilisant Google Fonts.
Vos pensées… Comment utilisez-vous Google Fonts ?
À vous maintenant ! Faites-nous savoir dans les commentaires comment vous utilisez les polices Google dans WordPress. Développez-vous des thèmes ou des plugins, créez-vous des sites Web personnalisés ou êtes-vous un pigiste aidant les gens à peaufiner la conception de leur site actuel. Faites-nous également savoir quelles sont certaines de vos polices Google préférées. Mes favoris personnels sont Roboto, Lora et PT Serif.
