▷ How to change fonts in WordPress » 【2022】

A great way to add a touch of branding and individualism to your WordPress site is to change your theme fonts.

Typography and other banner elements create a great first impression, set the mood for your site visitors, and establish your brand identity. Studies have also shown that fonts affect readers’ ability to learn, recall information, and memorize text.

If you’ve just installed a WordPress theme or have some experience with CSS and coding, 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 changing fonts in WordPress:

1. How to Change Fonts in WordPress Using Web Fonts

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

With this option, you can access a variety of sources without updating them every time there is a change, and it doesn’t take up space on your hosting server. 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 right kind of mood and image. that you wish.

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 have chosen, you can use a WordPress plugin to access the font library and choose the font you want on your site. For this guide, we choose Google Fonts and use the Typography Google Fonts plugin.

  1. To get started, login to your WordPress admin panel and select Plugins > Add New.
  1. Type Google Fonts Typography in the search field and select Install now.
  1. To select Activate.
  1. Then access the customizer go to Appearance > Customize.
  1. Select the google fonts section.
  1. Next, click the link to open the fonts settings and configure them as follows:
  • Below Basic settingsset the default font for body text, headers, and buttons.
  • Below Advanced settingsset your site title and description, menu, headers and content, sidebar and footer.
  • Uncheck unwanted font weights in the Font loading section to avoid slowing down your site.

If some fonts on your site are not displaying or working correctly, use the Depuration troubleshooting section.

  1. You can test these settings in the customization tool to make sure they work the way you want, then select publish.

To note: If you forget to select publish in the Customizer, you will lose any changes you have made.

How to add web fonts using code

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

However, there are different steps to follow if you are using a theme from the WordPress theme directory or a custom theme.

If you purchased a theme from the WordPress theme directory, create a child theme and then assign the style.css and functions.php files to it. It’s easier if you have a custom theme, because you can edit the stylesheet and functions file from within your theme.

  1. To get started, select a font from the Google Fonts library and select the + (more) icon to add it to your library.
  1. Then select the tab at the bottom where you will find the code to add to your site. Go to the insert font heading under the To integrate language. You will find the code generated by Google Fonts, which looks like this:

To note: We chose Work Sans for this guide, so the font name may be different from yours depending on what you chose.

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

This allows you to queue the style on Google Fonts servers to avoid conflicts with third-party plugins. It also allows for easier changes to the child theme.

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

wosib_add_google_fonts() function
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 sources in the future, like this:

function mybh_add_google_fonts() Work Sans’);

wp_enqueue_style(‘googleFonts’);

add_action(‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’);

In this case, we have enqueued the Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet so that the font works on your site.

  1. To do this, open your theme’s style.css file and add the code to style the 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 such as h1, h2 and h3 will use Cambria.

Once done, save the stylesheet and check if your fonts work as they should. If not, check that the fonts are not overridden in the stylesheet or clear your browser’s cache and try again.

  1. Have a fallback font to ensure that fonts can be rendered or accessed easily, especially for users with older devices, poor connections, or if the font provider is experiencing technical issues. To do this, go to the stylesheet and edit the CSS to read the following:

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

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

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

2. How to Change Fonts in WordPress Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a safer way to do so than pulling resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts to use as locally hosted fonts, but you can still download other fonts to your computer as long as licenses permit.

  1. To get started, download, unzip, upload the font file to your site, then link to it in your stylesheet. In this case, you don’t need to enqueue fonts in functions.php like you did with web fonts. Please confirm that the files you download are in .woff format before using them on your website.
  1. then 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 the Work Sans font, but you can replace it with your own fonts):

@Profile front
font family: ‘Work Sans’;
src: url(“fonts/Work Sans-Medium.ttf”) format(‘woff’); /* means, medium */
font weight: normal;
font style: regular;

@Profile front
font family: ‘Work Sans’;
src: url(“fonts/Work Sans-Bold.ttf”) format(‘woff’); /* means, medium */
font-weight: bold;
font style: regular;

@Profile front
font family: ‘Cambria’;
src: url(“fonts/Cambria.ttf”) format(‘woff’); /* means, medium */
font weight: normal;
font style: regular;

To note: Using @fontface lets you use bold, italic, and other variations of your font, after which you can specify the weight or style for each font.

  1. Next, add styling to 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 branding and user experience. It’s not an easy task, but you’ll have more control over your theme.

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