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 que vous souhaitez personnaliser les polices de votre site sans l’utilisation d’un 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 accédez à la page principale à l’adresse “Google Webfonts»Et cliquez sur n’importe quelle police, un petit pop-up apparaîtra pour 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 devez 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, le moyen préféré 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 le 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 hook d’action comme indiqué précédemment. Cela permet des modifications plus faciles du 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 de code, nous avons utilisé le wp_enqueue_style 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 des éléments pour lesquels vous souhaitez utiliser la police personnalisée ou d’ajouter du CSS personnalisé à votre site pour modifier la police, comme l’exemple suivant pour changer 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 des plugins géniaux qui vous permettront de modifier facilement les polices de votre site WordPress et plus particulièrement en utilisant Google Fonts.

Vos réflexions… Comment utilisez-vous les polices Google?

À 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. Dites-nous également quelles sont vos polices google préférées. Mes favoris personnels sont Roboto, Lora et PT Serif.

Share: