Comment ajouter des polices personnalisées à WordPress

Si vous voulez que votre site Web se démarque vraiment de la foule, l'utilisation de polices personnalisées vous aidera à y parvenir. Il existe des milliers de belles polices personnalisées parmi lesquelles choisir, et en sélectionnant celles qui conviennent à votre projet, vous pourrez créer un site Web non seulement unique, mais qui reflète également votre style et votre image de marque. Alors, comment ajouter des polices personnalisées à WordPress ?

Dans cet article, nous couvrirons tout ce que vous devez savoir sur l'application de polices personnalisées à votre site Web. Ceci comprend:

• Où trouver des polices personnalisées
• Comment ajouter des polices Google à votre site Web à l'aide du plugin Easy Google Fonts
• Ajout manuel de polices Google à votre site Web (aucun plug-in requis)
• Ajouter des polices Adobe à WordPress
• Comment ajouter une police personnalisée à votre espace Web

Prêt à commencer?

Où pouvez-vous trouver des polices personnalisées ?

De nos jours, de nombreux thèmes WordPress premium sont livrés avec une pléthore de polices personnalisées. Cependant, ceux-ci peuvent souvent augmenter le gonflement du thème et avoir un impact sur les temps de chargement de votre site Web plus que vous ne le pensez. Vous constaterez également que vous n'utilisez en réalité que quelques polices personnalisées au maximum, de sorte que la majorité des polices fournies par votre thème ne seront jamais nécessaires.

Par conséquent, nous vous recommandons de choisir un thème WordPress léger, auquel vous pourrez ensuite ajouter des polices personnalisées si nécessaire. Il existe un certain nombre d'endroits où vous pouvez trouver les bonnes polices personnalisées pour votre site Web. Nous allons jeter un coup d'oeil…

• Google Fonts – Le choix le plus populaire, Google Fonts, propose un répertoire gratuit de plus de 900 polices de créateurs open source pouvant être utilisées dans plus de 135 langues. Ces polices peuvent être parcourues rapidement puis intégrées de manière transparente dans tout projet de conception Web.
• Adobe Fonts (anciennement connu sous le nom de Typekit) – Bien que Typekit proposait à la fois des versions gratuites et premium de son service, désormais rebaptisé Adobe Fonts, vous devrez vous inscrire au package Adobe Creative Cloud payant pour accéder à cette ressource. Il existe des milliers de polices parmi lesquelles choisir, toutes les polices sont sous licence pour un usage personnel et commercial, et vous pouvez également choisir parmi des packs de polices sur le thème du projet, qui sont parfaits pour ceux qui n'ont pas l'œil pour le design.
• Font Squirrel – Dans la bibliothèque Font Squirrel, vous trouverez un mélange de polices gratuites et premium, ces dernières pouvant être achetées en une seule fois. Encore une fois, vous pouvez choisir parmi des milliers de polices de haute qualité, la majorité étant gratuites et sous licence commerciale.
• Fonts.com - Fournissant plus de 150 000 produits de polices de bureau et Web, Fonts.com contient une impressionnante collection de polices personnalisées haut de gamme. Vous trouverez également un assortiment d'articles intéressants sur le blog Font.com, partageant des astuces et des techniques typographiques.
• FontPair – Offrant une expérience légèrement différente des autres ressources, FontPair couple les polices de Google Fonts, vous aidant à trouver les bonnes combinaisons de polices pour votre site Web.

Donc, maintenant vous savez où trouver des polices personnalisées. Voyons ensuite comment ajouter des polices Google à votre site Web WordPress.

Comment ajouter des polices Google à WordPress à l'aide du plugin Easy Google Fonts

Comme Google Fonts est la ressource la plus populaire pour les polices personnalisées, nous allons commencer par voir comment ajouter une police de cette bibliothèque à votre site Web. Il existe plusieurs façons de procéder, mais l'option la plus rapide et la plus simple consiste à utiliser le plugin WordPress Easy Google Fonts.

Easy Google Fonts est un plugin WordPress gratuit qui vous permettra d'insérer des polices personnalisées dans votre site Web WordPress, sans avoir à toucher une ligne de code. S'intégrant au personnalisateur WordPress, ce plugin vous permettra d'insérer et d'utiliser les polices Google sur le front-end de votre site Web en temps réel, sans avoir à actualiser la page.

Découvrons donc maintenant comment installer et utiliser ce plugin.

Étape 1 : Installez les polices Google faciles

Pour commencer avec Easy Google Fonts, ouvrez votre tableau de bord WordPress et sélectionnez Plugins > Ajouter nouveau dans le menu.

Tapez ensuite Easy Google Fonts dans la fonction de recherche, et une fois le plugin récupéré, cliquez sur Installer > Activer .

Vous trouverez maintenant Easy Google Fonts sous Paramètres dans votre menu WordPress.

Étape 2 : Modifier les polices dans le personnalisateur WordPress

Une fois que vous avez installé Easy Google Fonts, dans votre menu WordPress, sélectionnez Apparence > Personnaliser . Votre site Web va maintenant s'ouvrir sur le front-end, où vous trouverez une section Typographie a été ajoutée au personnalisateur.

Cliquez sur Typographie. Vous pouvez ensuite sélectionner les différentes zones de votre site Web où vous souhaitez appliquer une police Google personnalisée (par exemple, paragraphe, en-tête 2, en-tête 3, etc.).

Sous la section que vous souhaitez modifier, cliquez sur Modifier la police . Vous pouvez ensuite sélectionner la police que vous souhaitez utiliser - vous pourrez prévisualiser l'apparence de chaque police directement sur votre site Web.

Non seulement vous pouvez modifier le type de police, mais vous pouvez également modifier la couleur, la taille, le positionnement et bien plus encore. Une fois que vous êtes satisfait de votre nouvelle police, cliquez sur Publier .

Étape 3 : créer des contrôles de police personnalisés

Les commandes par défaut faciles de Google Fonts vous permettront de modifier les polices des sections de paragraphe et des en-têtes 1 à 6. Cependant, tous les éléments de votre thème ne sont pas gérables par les contrôles de police par défaut.

Si vous souhaitez modifier un élément différent de votre thème (autre qu'un paragraphe ou un en-tête), vous devrez créer vos propres contrôles de police personnalisés. Bien que Easy Font Control vous permette de le faire facilement, vous aurez toujours besoin d'une compréhension de base des sélecteurs CSS.

Pour ajouter des contrôles de police personnalisés, sélectionnez Paramètres > Google Fonts dans votre tableau de bord WordPress. Ensuite, dans l'onglet Modifier les contrôles de police , attribuez un nom approprié à votre nouveau groupe de contrôle de police, puis sélectionnez Créer un contrôle de police . Ici, nous allons créer un contrôle de police pour les blocs de citation…

Sous Ajouter des sélecteurs CSS , ajoutez le sélecteur CSS pour l'élément que vous souhaitez gérer. Vous pouvez ajouter plus d'un élément si vous le souhaitez. Sélectionnez ensuite Enregistrer le contrôle des polices .

De retour dans le Customizer sur le front-end de votre site Web, sous Typographie , vous trouverez maintenant l'option Thème Typographie, où vous pourrez accéder à vos nouveaux contrôles personnalisés.

Vous pouvez maintenant sélectionner une nouvelle police personnalisée pour l'élément personnalisé spécifique et modifier tout autre paramètre d' apparence et de positionnement .

Easy Custom Fonts est une excellente option pour tous ceux qui souhaitent ajouter des polices personnalisées à WordPress à partir de Google. Cependant, si vous préférez, vous pouvez également ajouter manuellement des polices Google à votre site Web en utilisant uniquement du code, pas de plug-in. Découvrons comment procéder…

Comment ajouter manuellement des polices Google à WordPress (aucun plugin requis)

Si vous préférez ajouter Google Fonts à WordPress manuellement, vous aurez besoin d'une connaissance très basique du codage.

Étape 1 : Sélectionnez une police Google

Pour commencer, ouvrez Google Fonts et sélectionnez le type de police personnalisé que vous souhaitez ajouter à votre site Web.

Ensuite, sur la page de la police, cliquez sur Sélectionner cette police . Ici, nous avons sélectionné la police Indie Flower.

Une fenêtre contextuelle apparaîtra maintenant sur votre écran. Selon la police que vous avez sélectionnée, vous pourrez accéder à une sélection d'options de personnalisation pour les poids et les styles de police, ainsi que voir les informations d'intégration.

Étape 2 : Intégrez le code de la police personnalisée dans votre site Web WordPress

Ensuite, vous devrez copier le code Embed (voir popup ci-dessus) et le coller dans la section <head> de votre thème WordPress. Pour ce faire, le moyen le plus simple consiste à installer le plug-in WordPress gratuit Insérer des en-têtes et des pieds de page. En utilisant ce plugin, vous pouvez rapidement ajouter du code à votre site Web sans avoir à modifier vos fichiers de thème.

Après l'installation, ouvrez les paramètres du plugin en sélectionnant Paramètres > Insérer l'en-tête et les pieds de page depuis votre tableau de bord WordPress. Vous devez ensuite ajouter votre code d'intégration Google Fonts dans la section En-tête.

De même, si vous préférez, vous pouvez modifier le fichier header.php de votre thème enfant.

Étape 3 : Appliquez la nouvelle police à l'aide de CSS

Une fois que vous avez ajouté le code HTML de votre police personnalisée à votre site Web, vous pouvez maintenant utiliser CSS pour appliquer votre nouvelle police personnalisée. Dans la popup Google Fonts, vous trouverez les règles CSS spécifiques à votre nouvelle police.

De retour dans l'outil de personnalisation du côté direct de votre site Web, sélectionnez CSS supplémentaire. Ici, vous pouvez saisir le code CSS pour personnaliser les polices de votre site. Ci-dessous, vous pouvez voir que nous avons appliqué le code CSS Indie Flower aux sections d'en-tête 2 et de paragraphe…

Le Customizer vous montrera les modifications de police en temps réel, et si vous êtes satisfait des résultats, cliquez sur Publier .

Comment ajouter des polices Adobe à WordPress

Si vous vous êtes inscrit au package Adobe premium Creative Cloud, vous pourrez ajouter l'une de ses polices personnalisées à votre site Web WordPress. Ce processus est très similaire à celui consistant à ajouter manuellement des polices Google à votre site. Jetons un coup d'œil rapide.

Étape 1 : Choisissez une police Adobe

Tout d'abord, vous devrez parcourir la vaste bibliothèque de polices d'Adobe et choisir une ou plusieurs polices qui conviendront à votre projet. Une fois votre sélection effectuée, cliquez sur l'icône </> pour ajouter la police à un nouveau projet Web .

Il vous sera maintenant demandé de nommer votre projet Web, ainsi que d'utiliser les cases à cocher pour sélectionner les poids et les styles de police que vous souhaitez inclure. Sélectionnez ensuite Créer un projet .

Étape 2 : intégrez le code de la police Adobe dans votre site Web WordPress

L'étape suivante consiste à intégrer le code fourni par Adobe pour la police choisie dans votre site Web WordPress.

Cela suit exactement le même processus que l'intégration du code Google Fonts. Intégrez simplement le code dans la balise <head> de votre site Web ou utilisez le plugin WordPress Insérer des en-têtes et des pieds de page (comme indiqué précédemment).

Étape 3 : Appliquez la nouvelle police à l'aide de CSS

Encore une fois, comme Google Fonts, vous pouvez désormais appliquer votre nouvelle police personnalisée Adobe à l'aide des règles CSS. Dans votre tableau de bord Adobe, votre page de projet Web répertorie le nom de la famille de polices CSS, ainsi que le style de police et le poids numérique, pour chaque type de police que vous avez sélectionné.

De retour sur votre site WordPress, ces règles CSS peuvent être utilisées dans le Customizer sous CSS supplémentaire.

Nous avons donc maintenant expliqué comment ajouter des polices personnalisées à WordPress à l'aide des polices Google gratuites très populaires ainsi que de l'impressionnante ressource premium Adobe Fonts.

Cependant, la dernière option dont nous parlerons vous permet d'ajouter n'importe quelle police personnalisée à votre site Web en la téléchargeant sur le serveur de votre site. Découvrons-en plus.

Comment ajouter une police personnalisée à votre espace Web

L'ajout d'une police personnalisée à votre espace Web est relativement simple, mais encore une fois, vous aurez besoin d'une compréhension de base du CSS pour appliquer la police à votre site Web.

Étape 1 : Téléchargez une police personnalisée

Comme mentionné au début de cet article, il existe de nombreuses ressources où vous pouvez sélectionner des polices personnalisées gratuites ou premium à utiliser sur votre site Web. Lorsque vous choisissez une police personnalisée à ajouter à votre serveur, assurez-vous simplement que vous avez le droit de l'utiliser et qu'elle est téléchargeable.

Ici, nous avons téléchargé la police personnalisée gratuite Milkshake de Squirrel Fonts.

Il est important de télécharger votre police personnalisée au format webfont. Le format de conteneur de polices Web WOFF bénéficie de la prise en charge la plus multi-navigateurs, mais Google recommande de fournir plusieurs formats pour offrir une expérience cohérente aux utilisateurs sur tous les appareils.

Si vous avez besoin de convertir votre police personnalisée dans un format différent, Squirrel Font fournit un outil gratuit Webfont Generator qui vous permettra de le faire.

Étape 2 : téléchargez la police personnalisée sur votre serveur

L'étape suivante consiste à télécharger votre police personnalisée sur votre serveur. Pour ce faire, ouvrez le gestionnaire de fichiers dans le cPanel de votre site.

Ensuite, dans votre dossier de thèmes actifs, créez un nouveau dossier nommé Polices et téléchargez votre police personnalisée ici.

Si vous avez plusieurs formats de votre police, téléchargez-les tous dans le dossier Polices . Votre police personnalisée a maintenant été ajoutée à votre espace Web.

Étape 3 : Utilisez CSS pour appliquer la police personnalisée à votre site Web

Vous devez maintenant appliquer la police personnalisée à votre site Web. Pour commencer, vous devez charger la police dans la feuille de style de votre thème. Pour ce faire, ouvrez le WordPress Customizer et sous Additional CSS ajoutez ce code :

 @ font-face {
    famille de polices : Milkshake ;
    src : url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         format("woff");
}

Surtout, assurez-vous de changer le nom de la police et l'URL (copiez l'URL du fichier de police sur votre serveur).

Vous pouvez ensuite continuer et utiliser les règles CSS pour mettre à jour les polices de votre site. Voici un exemple d'application de la police personnalisée à l'en-tête 3 et aux sections de paragraphe :

Une fois que vous êtes satisfait de l'apparence de votre nouvelle police personnalisée sur votre site Web, cliquez sur Publier .

Réflexions finales sur la façon d'ajouter des polices personnalisées à WordPress

Comme vous pouvez le voir, si vous recherchez une police personnalisée belle et accrocheuse, il existe de nombreuses ressources qui vous permettront de trouver la police parfaite pour votre projet. Et de plus, vous savez maintenant comment ajouter avec succès des polices personnalisées à WordPress. Alors, quelles polices personnalisées allez-vous choisir ?

Vous avez des questions sur la façon d'ajouter des polices personnalisées à WordPress ? Veuillez demander dans les commentaires ci-dessous…