WordPress

How to Change Font in WordPress

This article explains how to change the font in WordPress sites.

When we design our WordPress site, we not only can change the theme and colours, but also the font or typography, both within paragraphs and titles/headers.

This is useful to customize your themes and show your site visitors a more aesthetic and attractive project which will make a difference.

The method explained in this tutorial to edit the template fonts and customize it is very easy and fast to apply.

This article includes screenshots to make it easy for any WordPress user to follow the described steps.

To begin, login to your WordPress dashboard and on the left menu press Plugins, then select the Add New option, as shown in the screenshot below (Plugins>Add New).

In the keywords search field, type “Gutenberg”, the name of one of the plugins used in this tutorial to change the font. When the Gutenberg plugin shows up, press the Install Now button, and then the Activate button.

After installing the first plugin, you need to install a second one. To do it, on the keyword search field type “easy google fonts”, when the plugin Easy Google Fonts shows up, press the Install Now button, and then press Activate.

Once the plugin was installed, on the dashboard left menu press Appearance, and among the displayed options press Customize.

On the customization screen, select Typography. Below, you can see the screen to edit the WordPress typography or font.

Select Default Typography to open the menu where you can start editing the typography, including from paragraphs to titles.

To begin, select Paragraphs and within the Font Family menu, select the font you like for your site. You will see a variety of fonts you can try after selecting them. On the center of the screen, you can see a preview for each font you select.

As said previously, you also can change the WordPress font for titles by editing the Heading 2 section. You can try different options until you find the expected result.

That’s all. Keep reading below to upload your own fonts making your site unique.

Uploading Your Own Font to Your WordPress Site

You can download additional fonts from sites like Dafont. There you can find both free and paid fonts to add to your site. Fonts formats are TTF, OTF, WOFF or WOFF2. If when you download your font you find several files, it means your selected typography or font has several variants. For example, the Google font Monserrat has over 18 variants.

Note: For this tutorial, I’m using the font named medicall.

Creating the Font-face File

The font-face file contains the font information to be used in our website. This information includes the font name, its variants and different formats.

This step can be done manually, or you can use tools to simplify the process. The tool used in this tutorial is Transfonter.

Este paso no lo vamos a crear a mano, sino que vamos a utilizar una herramienta online llamda Transfonter (https://transfonter.org/) que nos hará todo el trabajo siguiente estos pasos:

To begin, upload your font file(s) by pressing the Add Fonts button. Then choose the formats you want to be supported (This depends on the browser). You can leave other default options.

Then press the Convert button.

After pressing the Convert button, you will be able to download the font-face with different font formats.

Below, you can see samples of the files you will get.

Once you download the font-face, you need to access your site server through an FTP client like Filezilla, or through Cpanel (Files Manager) and upload your file to the subdirectory /wp-content/themes/current-theme.

Within this directory on your server (/wp-content/themes/current-theme) you need to locate a directory named fonts. If the fonts directory isn’t present, don’t worry, just create it.

Within the fonts directory, create a new subdirectory with the name of the font you want to upload. This is arbitrary as long as you identify the font.

Within your server’s theme directory (/wp-content/themes/current-theme.), find the file named functions.php. Right click the file functions.php and insert the following code at the end of the file.

Note: Replace medicall-font-css and the path /fonts/medicall/stylesheet.css for the font you are using. For this tutorial I’m using the font named medicall, you can select any font you want.

add_action('wp_enqueue_scripts', function () {

wp_enqueue_style('medicall-font-css', get_stylesheet_directory_uri() . '/fonts/medicall/stylesheet.css');

});

The next step must be done through C0SS. Here, you need to apply the font-family in all texts we want to apply our custom typography.

The next step must be done with CSS. We need to apply the font-family to texts in which we want to apply our custom typography.

Open the stylesheet.css file previously generated by Transfonter and find the font-family line highlighted in the screenshot below.

Then, you can add the CSS in WordPress, for example, by adding the following line.

h1 {

font-family: 'medicall'

}

In this way we apply the new font to all H1 in our site.

Conclusion

Changing the font in WordPress is pretty easy as shown above. There are different methods to change the typography on your site. All of them are valid. The methods described previously are easy and free. While you can use any alternative plugin, always make sure it is well rated by users. If you use page builders like Divi, Elementor or Envatos, you can edit the font from these plugins directly. Do not ignore the importance of typographies. You can have the best images and colors, but they must be in harmony with characters to generate a better visual experience for visitors.

Thank you for reading this article explaining how to change the font in WordPress. Keep following us for more WordPress professional tips.

About the author

David Adams

David Adams is a System Admin and writer that is focused on open source technologies, security software, and computer systems.