Comment ajouter des polices personnalisées dans WordPress

Voulez-vous ajouter des polices WordPress personnalisées? Les polices personnalisées vous permettent d'utiliser une belle combinaison de différentes polices sur votre site Web pour améliorer la typographie et l'expérience utilisateur.

En plus d'avoir une belle apparence, les polices personnalisées peuvent également vous aider à améliorer la lisibilité, à créer une image de marque et à augmenter le temps que les utilisateurs passent sur votre site Web.

Dans cet article, nous vous montrerons comment ajouter des polices personnalisées dans WordPress à l'aide de la méthode Google Fonts, TypeKit et CSS3 @ Font-Face.

Remarque: Le chargement d'un trop grand nombre de polices peut ralentir votre site Web. Nous vous recommandons de choisir deux polices et de les utiliser sur votre site Web. Nous vous montrerons également comment les charger correctement sans ralentir votre site Web.

Avant de voir comment ajouter des polices personnalisées dans WordPress, examinons les polices personnalisées que vous pouvez utiliser.

Comment trouver des polices personnalisées à utiliser dans WordPress

Les fontaines étaient chères, mais plus maintenant. Il existe de nombreux endroits pour trouver d'excellentes polices Web gratuites comme Google Fonts, Typekit, FontSquirrel et fonts.com.

Si vous ne savez pas mélanger et faire correspondre les polices, essayez Paire de polices. Aidez les concepteurs à combiner de superbes polices Google.

Lorsque vous choisissez vos polices, n'oubliez pas que l'utilisation d'un trop grand nombre de polices personnalisées ralentira votre site Web. C'est pourquoi vous devez sélectionner deux polices et les utiliser tout au long de votre conception. Cela apportera également de la cohérence à votre conception.

Tutoriel vidéo

Abonnez-vous à WPBeginner

Si vous n'aimez pas la vidéo ou préférez le guide écrit, continuez à lire.

Ajouter des polices WordPress personnalisées à partir des polices Google

Google Fonts est la bibliothèque de polices la plus grande, gratuite et la plus utilisée parmi les développeurs de sites Web. Il existe plusieurs façons d'ajouter et d'utiliser des polices Google dans WordPress.

Méthode 1: ajouter des polices personnalisées avec le plugin Google Easy Fonts

Si vous souhaitez ajouter et utiliser des polices Google sur votre site Web, cette méthode est de loin la plus simple et recommandée pour les débutants.

La première chose à faire est d'installer et d'activer le plugin Easy Google Fonts. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Après l'activation, vous pouvez accéder à Apparence »Personnalisateur page. Cela ouvrira l'interface de personnalisation du thème en direct, où vous verrez la nouvelle section Typographie.

En cliquant sur Typographie, vous verrez différentes sections de votre site Web où vous pouvez appliquer les polices Google. Cliquez simplement sur "Modifier la source" sous la section que vous souhaitez modifier.

Dans la section famille de polices, vous pouvez choisir n'importe quelle police Google que vous souhaitez utiliser sur votre site Web. Vous pouvez également choisir le style de police, la taille de police, le remplissage, la marge, etc.

Selon votre sujet, le nombre de sections ici peut être limité et vous ne pourrez peut-être pas modifier directement la sélection de police pour de nombreuses zones différentes de votre site Web.

Pour résoudre ce problème, le plugin vous permet également de créer vos propres contrôles et de les utiliser pour modifier les polices de votre site Web.

Vous devez d'abord visiter Paramètres »Polices Google page et attribuez un nom à votre contrôle de police. Utilisez quelque chose pour vous aider à comprendre rapidement où vous utiliserez ce contrôle de source.

Ensuite, cliquez sur le bouton "Créer un contrôle de police", puis vous serez invité à entrer les sélecteurs CSS.

Vous pouvez ajouter des éléments HTML que vous souhaitez cibler (par exemple h1, h2, p, blockquote) ou utiliser des classes CSS.

Vous pouvez utiliser l'outil Inspecter dans votre navigateur pour savoir quelles classes CSS la zone particulière que vous souhaitez modifier utilise.

Cliquez maintenant sur le bouton "Enregistrer le contrôle de source" pour enregistrer vos paramètres. Vous pouvez créer autant de pilotes de polices que vous le souhaitez pour différentes sections de votre site Web.

Pour utiliser ces pilotes de police, vous devez accéder à Apparence »Personnalisateur et cliquez sur l'onglet Typographie.

Sous Typographie, vous verrez désormais également l'option "Typographie thématique". Cliquez dessus pour afficher les contrôles de police personnalisés que vous avez créés précédemment. Vous pouvez maintenant cliquer sur le bouton Modifier pour sélectionner les polices et l'apparence de ce contrôle.

N'oubliez pas de cliquer sur le bouton Enregistrer ou publier pour enregistrer vos modifications.

Méthode 2: ajouter manuellement des polices Google à WordPress

Cette méthode vous oblige à ajouter du code à vos fichiers de thème WordPress. Si vous ne l'avez pas encore fait, consultez notre guide sur la façon de copier et coller du code dans WordPress.

Tout d'abord, visitez la bibliothèque de polices Google et sélectionnez la police que vous souhaitez utiliser. Cliquez ensuite sur le bouton d'utilisation rapide sous la police.

Sur la page des polices, vous verrez les styles disponibles pour cette police. Sélectionnez les styles que vous souhaitez utiliser dans votre projet, puis cliquez sur le bouton de la barre latérale en haut.

Ensuite, vous devrez basculer vers l'onglet "Intégrer" dans la barre latérale pour copier le code d'intégration.

Il existe deux façons d'ajouter ce code à votre site WordPress.

Tout d'abord, vous pouvez simplement modifier le fichier header.php de votre thème et coller le code avant

tag.

Cependant, si vous n'êtes pas familier avec l'édition de code dans WordPress, vous pouvez utiliser un plugin pour ajouter ce code.

Il vous suffit d'installer et d'activer le plug-in Insérer en-têtes et pieds de page. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Après l'activation, allez à Paramètres »Insérer des en-têtes et pieds de page page et collez le code intégré dans la zone "Scripts dans l'en-tête".

N'oubliez pas de cliquer sur le bouton Enregistrer pour enregistrer vos modifications. Le plugin va maintenant commencer à charger le code d'intégration de Google Font sur chaque page de votre site Web.

Vous pouvez utiliser cette police dans la feuille de style de votre thème comme ceci:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

Pour des instructions plus détaillées, consultez notre guide sur la façon d'ajouter des polices Google dans des thèmes WordPress.

Ajouter des polices WordPress personnalisées à l'aide de Typekit

Adobe Fonts Typekit est une autre ressource gratuite et premium pour des polices impressionnantes que vous pouvez utiliser dans vos projets de conception. Ils ont un abonnement payant, ainsi qu'un plan gratuit limité que vous pouvez utiliser.

Ouvrez simplement un compte Adobe Fonts et visitez la section de recherche de polices. De là, vous devez cliquer sur le bouton> pour sélectionner une source et créer un projet.

Ensuite, vous verrez le code d'intégration avec votre ID de projet. Il vous montrera également comment utiliser la police dans le CSS de votre thème.

Vous devez copier et coller ce code dans le

section de leur site Web.

Il existe deux façons d'ajouter ce code à votre site WordPress.

Tout d'abord, vous pouvez simplement modifier le fichier header.php de votre thème et coller le code avant

tag.

Cependant, si vous n'êtes pas familier avec l'édition de code dans WordPress, vous pouvez utiliser un plugin pour ajouter ce code.

Il vous suffit d'installer et d'activer le plugin Insérer en-têtes et pieds de page.

Après l'activation, allez à Paramètres »Insérer des en-têtes et pieds de page page et collez le code intégré dans la zone "Scripts dans l'en-tête".

Voilà, maintenant vous pouvez utiliser la police Typekit que vous avez sélectionnée dans votre feuille de style de thème WordPress comme ceci:

h1 .site-title { 
font-family: gilbert, sans-serif;
} 

Pour des instructions plus détaillées, consultez notre tutoriel sur la façon d'ajouter une police étonnante dans WordPress en utilisant Typekit.

Ajoutez des polices WordPress personnalisées à l'aide de CSS3 @ font-face

La façon la plus directe d'ajouter des polices personnalisées dans WordPress est d'ajouter les polices à l'aide de la méthode CSS3 @ font-face. Cette méthode vous permet d'utiliser la police de votre choix sur votre site Web.

La première chose à faire est de télécharger la police souhaitée au format Web. Si vous ne disposez pas du format Web pour votre police, vous pouvez le convertir à l'aide du générateur Fontfont Webfont.

Une fois que vous avez les fichiers de polices Web, vous devrez les télécharger sur votre serveur d'hébergement WordPress.

Le meilleur endroit pour charger les polices est à l'intérieur d'un nouveau dossier «polices» dans votre répertoire de thème ou de thème enfant.

Vous pouvez utiliser FTP ou le gestionnaire de fichiers depuis votre cPanel pour charger la police.

Une fois que vous avez téléchargé la police, vous devez la charger dans la feuille de style de votre thème en utilisant la règle CSS3 @ font-face comme ceci:

@font-face {
	font-family: Arvo;  
	src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
	font-weight: normal;  
}

N'oubliez pas de remplacer la famille de polices et l'URL par les vôtres.

Après cela, vous pouvez utiliser cette police n'importe où sur la feuille de style de votre thème comme ceci:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

Charger des polices directement à l'aide de CSS3 @ font-face n'est pas toujours la meilleure solution. Si vous utilisez une police Google Fonts ou Typekit, il est préférable de servir la police directement à partir de votre serveur pour des performances optimales.

Voilà, nous espérons que cet article vous a aidé à ajouter des polices WordPress personnalisées. Vous pouvez également consulter notre guide sur la façon d'utiliser les polices d'icônes dans WordPress et comment changer la taille de la police dans WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter y Facebook.