Dans cet article d'aide WordPress, je vais vous guider étape par étape dans le processus d'ajout de polices personnalisées à vos thèmes de blocs WordPress. Cela signifie que vous pouvez ajouter N'IMPORTE QUELLE police à N'IMPORTE QUEL thème, comme l'ajout de Google Fonts au thème Twenty Twenty Three.

Vous pouvez regarder le didacticiel vidéo ci-dessous, ou l'ignorer et lire l'article (disponible en plusieurs langues à l'aide des fonctionnalités de traduction de cette page). 

Je vous montre comment accomplir cette tâche en utilisant le plugin Create Block Theme développé directement par l'équipe de développeurs WordPress. Cela rend le plugin ultra léger, performant et très facile à utiliser avec les thèmes de blocs. Je vous montre également comment résoudre un problème d'autorisations courant qui peut survenir lorsque vous travaillez avec ce plugin.

Avec cette méthode, vous pouvez soit créer un lien vers des polices (c'est-à-dire un lien vers Google Fonts), soit intégrer des polices localement sur votre site (pour de meilleures performances du site). Allons-y !

Table des matières

1. Installez le plugin "Créer un thème de bloc"

Pour commencer, vous voudrez vous connecter à votre zone d'administration WordPress, qui vous mènera au tableau de bord. De là, allez dans Plugins> Ajouter un nouveau depuis la navigation principale (flèche rouge dans l'image ci-dessus).

Recherchez le plug-in "Créer un thème de bloc" à l'aide de la barre de recherche dans le coin supérieur droit (encadré en vert sur la photo ci-dessus). Une fois que le plugin Créer un thème de bloc s'affiche, cliquez sur le bouton "Installer maintenant" pour l'installer sur votre site (flèche rouge).

Ensuite, cliquez sur le bouton "Activer" pour activer le plugin.

Cours WordPress simplifié : Comment créer des sites Web puissants par Davies Media Design

2. Désactiver le plugin de sécurité (temporairement)

Pour que le reste de ce processus se déroule sans heurts, vous devrez désactiver temporairement tous les plug-ins de sécurité que vous avez installés et qui bloquent la capacité des utilisateurs à modifier des thèmes ou des plug-ins.

Dans mon cas particulier, j'utilise le plugin SG Security (qui est fourni avec tous les sites Web WordPress hébergé via Siteground – un hébergeur que je recommande fortement). Je sais pertinemment que ce plugin interfère avec le processus d'ajout de polices personnalisées, je vais donc désactiver le paramètre qui gêne.

Dans ce cas, je vais accéder à la section "Sécurité du site" du plugin SG Security en utilisant la navigation principale (flèche rouge dans l'image ci-dessus).

Ensuite, je vais faire défiler jusqu'à l'option intitulée "Désactiver l'éditeur de thèmes et de plugins" (surlignée en vert dans l'image ci-dessus). Vous verrez une bascule à droite de cette option - cliquez sur la bascule pour désactiver cette fonctionnalité (flèche rouge). Vous devriez voir un message "Succès" apparaître dans le coin droit de la flèche bleue).

Avec notre plugin de sécurité temporairement désactivé, nous pouvons passer à l'étape suivante de sélection et de téléchargement des polices que nous voulons utiliser sur notre site.

Il existe deux options pour utiliser des polices personnalisées dans WordPress.

3. Sélectionnez des polices personnalisées pour WordPress (polices Google liées)

La première option consiste à créer un lien vers des polices sur un site tiers, Google Fonts. Cette option est plus simple et prend moins de temps à configurer, mais ralentit la vitesse de chargement des pages de votre site Web. Cela vous limite également aux polices disponibles à partir de Google Fonts (bien que Google propose des tonnes de polices gratuites). Si vous êtes moins féru de technologie et que l'utilisation de Google Fonts ne vous dérange pas, je vous recommande cette option.

Pour commencer, accédez à "Apparence> Gérer les polices de thème" à partir de la navigation principale (flèche rouge dans l'image ci-dessus).

Dans la zone de travail "Gérer les polices de thème", vous verrez toutes les polices par défaut actuellement installées dans WordPress (surlignées en vert dans l'image ci-dessus). Vos polices sont également répertoriées sur le côté droit de la zone de travail, ainsi que les différentes variantes de chaque police et la taille de fichier pour chaque variante de police (encadrées en bleu).

Pour ajouter une nouvelle police à votre thème, cliquez sur le bouton "Ajouter une police Google" (flèche rouge).

Cliquez sur le menu déroulant "Sélectionner une police" et recherchez la police Google que vous souhaitez ajouter à votre site (les polices sont classées par ordre alphabétique). Si vous n'êtes pas sûr de l'apparence de chaque police, je vous recommande navigation sur le site Web de Google Fonts pour explorer les polices et les tester. Une fois que vous avez trouvé la police que vous souhaitez utiliser, sélectionnez-la dans la liste déroulante (flèche bleue).

Vous verrez maintenant une liste de toutes les variantes disponibles que vous pouvez installer sur votre thème pour cette police. Vous pouvez soit cocher la case à côté des variantes individuelles, soit cliquer sur la case supérieure (flèche rouge dans l'image ci-dessus) pour sélectionner toutes les variantes. Vous verrez une liste de vos variantes sélectionnées, ainsi que leur taille de fichier, sur le côté droit de l'écran. Une fois que vous êtes prêt, cliquez sur "Ajouter des polices Google à votre thème" (flèche verte).

Vous devriez maintenant voir un message en haut de la zone de travail indiquant que la police a été installée sur votre thème (dans ce cas, sur le thème Twenty-Twenty Three). Vous pouvez ensuite cliquer sur le lien "Gérer les polices" dans la boîte de message de réussite, ou cliquer sur la petite flèche de retour (flèche rouge dans l'image ci-dessus) pour revenir à la zone de travail "Gérer les polices de thème".

Vous verrez maintenant votre famille de polices nouvellement installée répertoriée avec le reste des polices de votre thème (flèche rouge dans l'image ci-dessus). Vous verrez également votre famille de polices et toutes ses variantes de polices associées sur le côté droit de la zone de travail (surlignées en vert).

4. Intégrer des polices personnalisées pour WordPress (polices locales pour un meilleur référencement)

La deuxième option pour ajouter des polices à votre site Web WordPress consiste à « intégrer » ou « héberger localement » vos polices. En d'autres termes, vos fichiers de polices seront situés sur le même serveur Web qui héberge votre site Web.

L'avantage de cette méthode est qu'elle ne nécessite pas de récupérer les polices d'un domaine tiers. En conséquence, vos polices se chargent plus rapidement et donc votre page Web se charge plus rapidement. Un chargement plus rapide des pages Web est meilleur pour l'expérience utilisateur, ce qui signifie qu'il peut aider votre site à se classer plus haut sur les moteurs de recherche et à obtenir plus de trafic.

En d'autres termes, les polices intégrées sont meilleures pour le référencement (optimisation pour les moteurs de recherche).

Bien que cette méthode nécessite quelques étapes supplémentaires, elle reste assez simple et utilise le même plugin que nous avons installé précédemment (plugin Create Block Themes).

Pour installer vos polices localement, commencez par naviguer vers Apparence> Gérer les polices de thème à partir de la navigation principale (si vous n'y êtes pas déjà depuis la dernière étape - flèche bleue dans l'image ci-dessus). Ensuite, cliquez sur le bouton "Ajouter une police locale" dans le coin supérieur droit de la zone de travail (flèche rouge).

Vous serez redirigé vers la zone "Polices locales" où vous pourrez sélectionner un fichier sur votre ordinateur pour le télécharger sur votre thème. Sous le bouton "Choisir un fichier", vous verrez une liste des formats de fichiers de polices pris en charge. Vous pouvez obtenir ces formats à partir de n'importe quel site Web de polices de confiance, y compris Google Fonts.

Trouvez et téléchargez la police de votre choix à partir de Google Fonts

Je vais sauter sur Google Fonts et utiliser la barre de recherche (flèche rouge) pour rechercher la police que je veux - dans ce cas, la police "Catamaran". Une fois la police répertoriée dans les résultats, je clique dessus pour afficher la page de la police (flèche verte).

Ensuite, je clique sur le bouton "Télécharger la famille" pour télécharger cette police et toutes ses variantes sur mon ordinateur. Vous pouvez faire défiler la page de la police vers le bas si vous souhaitez voir toutes les variantes disponibles pour cette police.

Cliquez sur "Enregistrer" pour enregistrer le fichier zip de la police sur votre ordinateur.

Décompressez votre dossier de polices pour accéder aux fichiers de polices

Une fois le téléchargement terminé, cliquez sur la flèche à côté du téléchargement terminé (flèche rouge) et cliquez sur "Afficher dans le dossier" (flèche verte).

Faites un clic droit sur le fichier zip dans votre explorateur de fichiers et cliquez sur "Extraire tout".

Une fenêtre contextuelle s'affiche, vous indiquant où les polices sont extraites (flèche rouge). Vous pouvez modifier cet emplacement si vous le souhaitez, sinon cliquez sur le bouton « Extraire » (flèche verte). Cela décompressera le dossier et créera un nouveau fichier sur votre ordinateur avec tous les fichiers de police décompressés. Ce dossier devrait s'ouvrir automatiquement.

Si vous avez téléchargé des fichiers de polices à l'aide de Google Fonts, entrez dans le dossier intitulé "statique" pour afficher tous vos fichiers de polices. Sinon, recherchez simplement tous les fichiers qui sont des fichiers OTF, TTF, WOFF ou WOFF2.

Dans ce dossier "statique", vous verrez une liste de toutes les variantes de police que nous avons téléchargées pour la police Catamaran à partir de Google Fonts. Il existe 9 variantes au total, et nous pouvons soit les télécharger toutes sur notre site Web, soit uniquement les variantes que nous voulons / dont nous avons besoin. Cliquez sur l'emplacement du dossier dans l'explorateur de fichiers (flèche verte), puis cliquez avec le bouton droit et sélectionnez "Copier".

Téléchargez vos polices personnalisées sur WordPress

Revenez à WordPress où vous avez ouvert la zone de travail "Polices locales". Cliquez sur le bouton "Choisir un fichier" (flèche rouge dans l'image ci-dessus) pour sélectionner vos polices. Vous pouvez accéder manuellement à l'emplacement sur votre ordinateur où vos polices sont stockées. Ou, cliquez simplement sur la barre d'adresse de l'explorateur de fichiers (flèche bleue), supprimez l'adresse qui s'y trouve actuellement, puis faites un clic droit et sélectionnez "Coller" (flèche verte). Cela collera l'adresse que vous avez copiée à l'étape précédente. Appuyez sur la touche Entrée et vous serez redirigé vers le dossier avec vos polices.

Vous devez télécharger vos variantes de police une par une. Pour cet exemple, je vais simplement télécharger la variante de police "Catamaran-Regular" en cliquant dessus (flèche verte), puis en cliquant sur le bouton "Ouvrir" (flèche rouge).

Vous devriez maintenant voir des informations pour le "NOM DE LA POLICE", "STYLE DE LA POLICE" et "POIDS DE LA POLICE", ainsi qu'un aperçu de la police sur le côté droit. Cliquez sur "Télécharger la police sur votre thème" (flèche rouge) pour télécharger la variante de police.

Afficher les polices de votre thème personnalisé

Vous devriez maintenant voir un message de réussite en haut de la zone de travail (encadré en vert dans l'image ci-dessus). Félicitations ! Votre police personnalisée est maintenant téléchargée sur votre thème en tant que police locale ! Vous pouvez continuer à cliquer sur "Choisir un fichier" et télécharger autant de variantes de police que vous le souhaitez.

Une fois terminé, cliquez sur le lien "Gérer les polices" dans la boîte de message de réussite ou sur la flèche de retour (indiquée par la flèche rouge) pour revenir à la zone de travail Gérer les polices de thème.

Vous verrez maintenant la nouvelle famille de polices "Catamaran" répertoriée avec le reste des familles de polices de votre thème (flèche rouge). De plus, vous verrez la famille de polices et toutes les variantes que vous avez installées sur le côté droit de la fenêtre Gérer les polices de thème (surlignées en vert).

5. Remplacez les polices de votre thème par vos polices personnalisées

Maintenant que vos nouvelles polices sont installées, il est temps de passer à la partie amusante !

Pour changer les polices de votre thème en vos polices personnalisées, accédez à l'éditeur de site en allant dans Apparence> Éditeur (flèche rouge dans l'image ci-dessus).

Cliquez n'importe où dans la zone de contenu principale (flèche rouge) de l'éditeur de site pour afficher les commandes.

Dans le menu supérieur, cliquez sur l'icône "Styles" (flèche bleue). Cliquez ensuite sur « Typographie » (flèche rouge).

Sous "Éléments", vous pouvez modifier la police du texte, des liens, des titres ou des boutons. Je vais sélectionner l'option "Titres" pour cet exemple.

Vous verrez maintenant une liste déroulante sous "Typographie" où vous pouvez sélectionner l'une de vos polices de thème (flèche rouge). Vous pouvez voir que les polices "Neuton" et "Catamaran" que j'ai ajoutées pour ce didacticiel sont répertoriées ici. Je vais sélectionner "Neuton" pour ma police de titre.

Cliquez sur le bouton "Enregistrer" dans le coin supérieur droit pour enregistrer vos modifications.

Cliquez une fois de plus sur "Enregistrer" (flèche rouge) et votre police personnalisée sera désormais enregistrée pour tous les titres de votre site !

Ensuite, vous pouvez cliquer sur le lien Afficher> Afficher le site dans le coin supérieur droit de l'éditeur de site (flèches rouges sur la photo ci-dessus) pour voir à quoi ressemble votre site Web avec votre nouvelle police. Revenez à l'éditeur de site et répétez ce processus pour tous les autres éléments dont vous souhaitez personnaliser la police.

Pour revenir à la zone d'administration de WordPress, cliquez sur le logo dans le coin supérieur gauche de l'éditeur de site (flèche verte), puis cliquez à nouveau sur le logo.

6. Comment supprimer les polices personnalisées de WordPress

Pour supprimer l'une de vos polices personnalisées, commencez par revenir à Apparence> Gérer les polices de thème.

Vous pouvez supprimer toute la famille de polices en passant votre souris sur le côté droit du nom de la famille de polices et en cliquant sur l'icône de la corbeille qui apparaît (flèche bleue). Ou, passez votre souris sur les variantes de police individuelles et cliquez sur l'icône de la corbeille (les variantes de police sont situées à l'intérieur de la zone en surbrillance verte). Vous pouvez également cliquer sur le lien "Supprimer la famille de polices" pour supprimer n'importe quelle famille de polices (flèche violette).

C'est tout pour ce tutoriel! Si vous avez aimé, vous pouvez consulter mes autres Articles d'aide WordPress ou inscrivez-vous à mon Masterclass WordPress sur Udemy.

Davies Media Design Newsletter par courrier électronique sur les applications créatives gratuites

Abonnez-vous à la newsletter DMD

Inscrivez-vous pour recevoir de nouveaux didacticiels, des mises à jour de cours et les dernières nouvelles sur vos applications créatives gratuites préférées !

Vous avez avec succès Inscrit!

Pin It sur Pinterest