Un excellent moyen d'ajouter une touche de marque et d'individualisme à votre site WordPress consiste à modifier les polices de votre thème.

La typographie et d'autres éléments de bande créent une bonne première impression, créent l'ambiance pour les visiteurs de votre site et établissent l'identité de votre marque. Des études^(Studies) ont également montré que les polices affectent la capacité des lecteurs à apprendre, à se rappeler des informations et à mémoriser des textes.

Si vous venez d' installer un thème WordPress^{(installed a WordPress theme)} ou si vous avez de l'expérience en matière de CSS et de codage, nous vous montrerons plusieurs options que vous pouvez utiliser pour modifier les polices dans WordPress .

Comment changer les polices dans WordPress^{(How to Change Fonts in WordPress)}

Trois options principales s'offrent à vous pour changer les polices dans WordPress :

• Utilisez des polices Web telles que Google Fonts , Fonts.com ou Adobe Edge Web Fonts , qui sont hébergées sur un site tiers
• Codez^(Code) les polices Web dans votre thème et mettez-les en file d'attente
• Hébergez^(Host) des polices sur votre site et ajoutez-les à votre thème

1. Comment changer les polices dans WordPress à l'aide de polices Web^{(1. How to Change Fonts in WordPress Using Web Fonts)}

L'utilisation de polices Web est un moyen plus simple et plus rapide de modifier les polices dans WordPress que de télécharger et de télécharger des fichiers de polices.

Avec cette option, vous pouvez accéder à une variété de polices^{(access a variety of fonts)} sans les mettre à jour chaque fois qu'il y a un changement, et cela ne monopolise pas l'espace serveur sur votre hébergement. Les polices sont servies directement à partir des serveurs du fournisseur à l'aide d'un plug-in ou en ajoutant du code à votre site.

Assurez^(Make) -vous que les polices Web que vous choisissez pour votre site correspondent à l'identité de votre marque, sont faciles à lire pour le corps du texte, sont familières aux visiteurs du site Web et transmettent le type d'ambiance et d'image que vous souhaitez.

Vous pouvez ajouter des polices Web à l' aide d'un plugin WordPress^{(using a WordPress plugin)} ou manuellement en ajoutant quelques lignes de code à votre site. Explorons les deux options.

Comment ajouter des polices Web à l'aide d'un plugin WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

Selon la police Web que vous avez choisie, vous pouvez utiliser un plugin WordPress pour accéder à la bibliothèque de polices et choisir celle que vous voulez sur votre site. Pour ce guide, nous avons choisi Google Fonts et utilisé le plugin Google Fonts Typography .

1. Pour commencer, connectez-vous à votre tableau de bord d'administration WordPress et sélectionnez Plugins > Add New .

1. Saisissez Google Fonts Typography dans le champ de recherche, puis sélectionnez Installer maintenant^{(Install Now)} .

1. Sélectionnez Activer^(Activate) .

1. Ensuite, accédez au Customizer en allant dans Appearance > Customize .

1. Sélectionnez la section Google Fonts .

1. Ensuite, cliquez sur le lien pour ouvrir les paramètres des polices et configurez-les comme suit :

• Sous Paramètres de base^{(Basic Settings)} , définissez la police par défaut du corps du texte, des titres et des boutons.

• Sous Paramètres avancés^{(Advanced Settings)} , configurez le titre et la description de votre site, le menu, les en-têtes et le contenu, la barre latérale et le pied de page.

• Décochez^(Uncheck) les poids de police indésirables dans la section Chargement des polices pour ^{(Font Loading)}éviter de ralentir votre site^{(avoid slowing down your site)} .

Si certaines polices de votre site ne s'affichent pas ou ne fonctionnent pas correctement, utilisez la section Débogage^{(Debugging )} pour résoudre le problème.

1. Vous pouvez tester ces paramètres dans l' outil de personnalisation^(Customizer) pour vous assurer qu'ils fonctionnent comme vous le souhaitez, puis sélectionner Publier^(Publish) .

Remarque^(Note) : Si vous oubliez de sélectionner publier dans le Customizer , vous perdrez toutes les modifications que vous avez apportées.

Comment ajouter des polices Web à l'aide de code^{(How to Add Web Fonts Using Code)}

Vous pouvez installer et utiliser des polices Web si vous avez accès au code de votre thème. Il s'agit d'une alternative manuelle à l'ajout d'un plugin supplémentaire, mais ce n'est pas compliqué si vous suivez attentivement les étapes.

Cependant, il y a différentes étapes à suivre si vous utilisez un thème du répertoire de thèmes WordPress ou un thème personnalisé.

Si vous avez acheté un thème dans le répertoire des thèmes WordPress , créez un thème enfant^{(create a child theme)} , puis attribuez-lui les fichiers style.css et functions.php. C'est plus facile si vous avez un thème personnalisé car vous pouvez modifier la feuille de style et le fichier de fonctions de votre thème.

1. Pour commencer, sélectionnez une police dans la bibliothèque Google Fonts , puis sélectionnez l' icône + (plus) pour l'ajouter à votre bibliothèque.

1. Ensuite, sélectionnez l'onglet en bas où vous trouverez le code à ajouter à votre site. Accédez à la section Incorporer la police^{(Embed font)} sous l' onglet Incorporer . ^(Embed)Vous trouverez le code généré par Google Fonts , qui ressemble à ceci :

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Remarque^(Note) : nous avons choisi Work Sans pour ce guide, le nom de la police peut donc être différent sur le vôtre en fonction de ce que vous avez choisi.

1. Copiez cette partie du code : https://fonts.googleapis.com/css2?family=Work+Sans

Cela vous permet de mettre en file d'attente le style des serveurs Google Fonts pour éviter tout conflit avec des plug-ins tiers. Il permet également des modifications plus faciles du thème enfant.

1. Pour mettre la police en file d'attente, ouvrez le fichier de fonctions et ajoutez le code suivant. ( Remplacez^(Replace) le lien par le lien que vous obtenez de Google Fonts ):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

1. Vous pouvez ajouter une nouvelle ligne à votre fonction ou à la même ligne si vous souhaitez ajouter plus de polices à l'avenir comme suit :

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

Dans ce cas, nous avons mis en file d'attente les polices Cambria et Work Sans .

L'étape suivante consiste à ajouter les polices à la feuille de style de votre thème pour que la police fonctionne sur votre site.

1. Pour ce faire, ouvrez le fichier style.css de votre thème et ajoutez le code pour styliser les éléments individuels avec vos polices Web comme suit :

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif;
}

Dans ce cas, la police principale sera Work Sans tandis que les éléments d'en-tête comme h1, h2 et h3 utiliseront Cambria .

Une fois cela fait, enregistrez la feuille de style et vérifiez si vos polices fonctionnent comme elles le devraient. Si ce n'est pas le cas, vérifiez que les polices ne sont pas remplacées dans la feuille de style ou videz le cache de votre navigateur et réessayez.

1. Ayez une police de secours en place pour vous assurer que les polices peuvent être rendues ou accessibles facilement, en particulier pour les utilisateurs disposant d'anciens appareils, de mauvaises connexions ou si le fournisseur de polices a des problèmes techniques. Pour cela, rendez-vous dans la feuille de style et éditez le CSS pour lire comme suit :

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
famille de polices : 'Cambria', Times New Roman, serif ; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Si tout va bien, les visiteurs de votre site verront vos polices Web par défaut, dans notre cas Work Sans et Cambria . S'il y a des problèmes, ils verront les polices de sauvegarde, par exemple Arial ou Times New Roman dans notre cas.

2. Comment changer les polices dans WordPress en hébergeant des polices^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

L'hébergement de polices sur vos propres serveurs vous aide à optimiser les performances de vos polices Web, mais c'est aussi un moyen plus sûr^{(a more secure way)} de le faire au lieu de tirer des ressources de sites tiers.

Google Fonts et d'autres polices Web vous permettent de télécharger des polices à utiliser en tant que polices hébergées localement, mais vous pouvez toujours télécharger d'autres polices sur votre ordinateur à condition que les licences vous le permettent.

1. Pour commencer, téléchargez, décompressez, téléchargez le fichier de police sur votre site, puis liez-le dans votre feuille de style. Dans ce cas, vous n'avez pas besoin de mettre les polices en file d'attente dans le fichier functions.php comme vous l'avez fait avec les polices Web. Vérifiez que les fichiers que vous téléchargez sont au format .woff avant de les utiliser sur votre site Web.

1. Ensuite, allez sur wp-content/themes/themename pour télécharger le fichier de police sur votre thème. 
2. Ouvrez la feuille de style et ajoutez le code suivant (dans ce cas, nous utilisons la police Work Sans , mais vous pouvez la remplacer par vos propres polices) :

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
style de police : normal ; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight : gras ; ^{( font-weight: bold;)}
style de police : normal ; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
style de police : normal ; ^{( font-style: normal;)}
}

Remarque^(Note) : L'utilisation de @fontface vous permet d'utiliser le gras, l'italique et d'autres variantes de votre police, après quoi vous pouvez spécifier le poids ou le style de chaque police.

1. Ensuite, ajoutez un style à vos éléments comme suit :

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
famille de polices : 'Cambria', Times New Roman, serif ; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Personnalisez votre typographie WordPress^{(Customize Your WordPress Typography)}

Changer les polices dans WordPress est une excellente idée pour améliorer l'image de marque et l'expérience utilisateur. Ce n'est pas une tâche simple, mais vous aurez plus de contrôle sur votre thème.

Avez^(Were) -vous pu personnaliser les polices de votre site en suivant les étapes à l'aide des conseils de ce guide ? Dites-^(Tell) nous dans les commentaires.

How to Change Fonts in WordPress

A great way to add somе branding and individualism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Comment déplacer WordPress site d'un hôte à un autre

• Comment installer et installer WordPress sur Microsoft Azure

• Comment faire pour exécuter rapidement WordPress sur blazingly Microsoft Azure

• Comment configurer Privacy dans WordPress et pourquoi il est important

• Comment installer WordPress sur Google Cloud Platform

• Comment sauvegarder votre site WordPress

• Comment dupliquer une page dans WordPress

• Les 3 meilleurs plugins SEO pour WordPress

• Comment installer un site de test WordPress sur votre ordinateur

• Le meilleur format d'écriture de blog pour faire passer vos points

• Comment modifier le pied de page dans WordPress

• Comment protéger par mot de passe les pages de votre site WordPress

• Comment supprimer les logiciels malveillants de votre site WordPress

• Comment mettre à jour PHP dans WordPress

• Comment créer un blog Wix aussi bon que WordPress

• Comment configurer votre propre site Web de type Twitter en utilisant le thème P2 de WordPress

• Comment faire un WordPress Site Secure

• Comment passer de l'éditeur WordPress classique à Gutenberg

• Comment installer un thème sur WordPress

• Must Have WordPress Yoast SEO Settings 2021