Comment ajouter des polices personnalisées dans WordPress

Voulez-vous ajouter des polices personnalisées dans WordPress ? 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’être belles, 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 WordPress.

Dans cet article, nous allons vous montrer comment ajouter des polices personnalisées dans WordPress à l'aide de Google Fonts, TypeKit et de la méthode 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 la recherche de polices personnalisées que vous pouvez utiliser.

Comment trouver des polices personnalisées à utiliser dans WordPress

Les polices étaient chères, mais ce n’est plus le cas. Il existe de nombreux endroits où trouver d'excellentes polices Web gratuites, telles que Google Fonts, Typekit, FontSquirrel et fonts.com.

Si vous ne savez pas comment mélanger et assortir les polices, essayez Font Pair. Il aide les concepteurs à associer 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.

Cela étant dit, voyons comment ajouter des polices personnalisées dans WordPress. C'est ce que nous allons aborder dans ce tutoriel :

Ajout de polices personnalisées dans WordPress à partir de Google Fonts

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

Méthode 1 : ajout de polices Google à l'aide d'un plugin WordPress

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 Google Fonts Typography. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Offre : Si vous souhaitez obtenir la version premium du plugin, assurez-vous d'utiliser notre coupon Google Fonts pour WordPress pour une réduction de 30 %. Cela vous permettra de modifier la couleur et la taille de la police dans votre thème WordPress et bien plus encore.

Lors de l'activation, vous aurez la possibilité de saisir votre adresse e-mail pour recevoir le guide de démarrage rapide officiel.

Ensuite, vous devrez cliquer sur Plugin de polices » Personnaliser les polices dans la barre latérale d'administration.

Cela vous mènera automatiquement au client du thème WordPress et ouvrira automatiquement la nouvelle section « Fonts Plugin ».

Ici, vous pouvez choisir les polices par défaut pour votre site Web dans la section « Paramètres de base », et les polices pour les parties spécifiques de votre site Web sous « Paramètres avancés ».

Commençons par cliquer sur « Paramètres de base ». Ici, vous pouvez sélectionner les polices de votre contenu, vos titres, vos boutons et vos champs.

Les menus déroulants « Famille de polices » vous permettent de choisir une nouvelle police. Vous trouverez la police par défaut en haut, puis les polices système et enfin une énorme liste de plus de 1000 polices Google.

Lorsque vous choisissez une nouvelle police, l'aperçu change automatiquement pour vous montrer à quoi elle ressemble.

Vous pouvez désormais utiliser les paramètres avancés du plugin pour affiner vos sélections de polices.

Vous devrez cliquer sur le bouton fléché de retour « < » en haut à gauche de la page, puis cliquer sur la section « Paramètres avancés ».

Vous trouverez ici les paramètres des différentes sections de votre site Web, tels que le titre du site, le menu de navigation, la zone de contenu, la barre latérale et le pied de page.

Par exemple, la section « Contenu » vous proposera des options pour modifier la police de vos différents niveaux de titre et citations.

Vous pouvez sélectionner les polices personnalisées que vous souhaitez utiliser dans les menus déroulants.

Vous pouvez choisir des polices personnalisées pour votre zone de barre latérale de la même manière.

Cliquez simplement sur le bouton Précédent et entrez les paramètres de la « Barre latérale ». Vous y trouverez des menus déroulants pour sélectionner les polices pour les en-têtes et le contenu de votre barre latérale.

Lorsque vous êtes satisfait de vos sélections de polices personnalisées, n'oubliez pas de cliquer sur le bouton « Publier » pour stocker vos modifications.

Méthode 2 : ajout manuel de polices Google dans WordPress

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

Tout d’abord, visitez la bibliothèque Google Fonts et sélectionnez la police que vous souhaitez utiliser. Ensuite, cliquez 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 passer à l'onglet « Intégrer » dans la barre latérale pour copier le code d'intégration.

Il existe deux manières d’ajouter ce code à votre site WordPress.

Tout d’abord, vous pouvez modifier le fichier header.php de votre thème et coller le code avant la balise <body>.

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

Installez et activez simplement le plugin WPCode. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Lors de l'activation, accédez à la page Extraits de code » En-tête et pied de page et collez le code d'intégration dans la case « En-tête ».

N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos modifications. Le plugin va maintenant commencer à charger le code intégré de Google Font sur toutes les pages 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 en savoir plus, consultez notre guide sur la façon d'ajouter des polices Google dans les thèmes WordPress.

Ajout de polices personnalisées dans WordPress à l'aide de Typekit

Typekit d'Adobe Fonts est une autre ressource gratuite et premium de superbes polices que vous pouvez utiliser dans vos projets de conception. Ils disposent d’un abonnement payant ainsi que d’un forfait gratuit limité que vous pouvez utiliser.

Créez simplement un compte Adobe Fonts et visitez la section « Parcourir les polices ». À partir de là, vous devez cliquer sur le bouton pour sélectionner une police 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 ce code et le coller dans la section de votre site Web.

Il existe deux manières d’ajouter ce code à votre site WordPress.

Tout d’abord, vous pouvez modifier le fichier header.php de votre thème et coller le code avant la balise <body>.

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

Installez et activez simplement le plugin WPCode.

Lors de l'activation, accédez à la page Extraits de code » En-tête et pied de page et collez le code d'intégration dans la case « En-tête ». Ensuite, cliquez sur le bouton « Enregistrer les modifications ».

C'est ça. Vous pouvez désormais utiliser la police Typekit que vous avez sélectionnée dans la feuille de style de votre 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 superbe typographie dans WordPress à l'aide de Typekit.

Ajout de polices personnalisées dans WordPress à l'aide de CSS3 @font-face

Le moyen le plus direct d’ajouter des polices personnalisées dans WordPress consiste à ajouter les polices à l’aide de la méthode CSS3 @font-face. Cette méthode vous permet d'utiliser n'importe quelle police que vous aimez sur votre site Web.

Tout d’abord, vous devez télécharger la police que vous aimez au format Web. Si vous ne disposez pas du format Web pour votre police, vous pouvez la convertir à l'aide du générateur FontSquirrel Webfont.

Une fois que vous disposez des fichiers de polices Web, vous devrez les télécharger sur votre serveur d’hébergement WordPress. Le meilleur endroit pour télécharger les polices est dans un nouveau dossier « polices » dans le répertoire de votre thème ou de votre thème enfant.

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

Une fois que vous avez téléchargé la police, vous devez charger la police 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(http://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ù dans 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. Par exemple, si vous utilisez une police de Google Fonts ou Typekit, il est préférable de diffuser la police directement depuis leur serveur pour des performances optimales.

Nous espérons que ce didacticiel vous a aidé à apprendre à ajouter des polices personnalisées dans WordPress. Vous voudrez peut-être également apprendre à intégrer une vidéo Facebook ou consulter notre liste des meilleurs plugins Instagram pour WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.