How to Change Font in WordPress (4 Easy Ways)

Want to tweak the typography of your site via a brand new font? This post will show you how to change font in WordPress. Here are several ways to get it done!

Typography plays an important role in your website. It’s as important as any of the design elements. Even if a website has a flat design, selecting a good font might change its whole look.

When it comes to choosing a font for your website, you have to experiment in order to find just the right font that fits the theme of your website.

Some WordPress themes give you the option to change the font along with other typography tweaks. And there are other themes that don’t have this flexibility. For example, the Twenty Twenty-One theme has no custom typography control.

There are several ways to change the font in WordPress. In this article, we will learn how to change your WordPress font. Even if your theme doesn’t have the font you prefer, we will describe how you can get the font of your choice on your site or host your own font.

Different ways on how to change font in WordPress

As you already know, fonts play a crucial role in the overall look of your website. You would probably want to choose a popular font but make sure it matches your site design. A good combination of design and typography is what makes a website stand out.

There are several ways to change the font of your WordPress website. You can use any of the following methods:

• Change WordPress font using the Customizer or site builder
• Use a plugin to change the font
• Enqueuing fonts in WordPress
• Hosting your own fonts on your website

Whether you want to add fonts hosted outside your website or you want to host your own fonts, this article will be helpful for you. Let’s discuss how to change fonts in WordPress, how to change font size in WordPress, and other typographies. We will also see their pros and cons. So, let’s get started.

Change WordPress font using the Customizer

This is the quickest and easiest way to change fonts in WordPress. Many themes give you the Typography option to customize and change your fonts. In this example, we will be using the OceanWP theme which has the Typography option in the theme customization menu. Let’s find out how to change the font in the OceanWP theme:

1. From your WordPress Dashboard, hover over Appearance. From the Appearance menu, select Customize.

2. This will bring you to the customization page. From the menu on the left, select Typography.

Depending on what theme you are using, the next page might be different. OceanWP gives you a variety of options to change the fonts of the particular sections of your website. For this example, we will only be changing the fonts of all the headlines of the test website.

3. Select All Headings from the menu on the left. (You may choose any sections that you want to change).

4. Now you have access to all the font options for the headings. To change the font, click the dropdown labeled Font Family.

Select the font you want. We are choosing the Times New Roman, Times, serif font for this example. (The Times New Roman font will be used; but if for some reason, it is not found, the Times will be used. The same thing goes for serif).

From this section, you can also change the basic typography of your fonts, like font size, font weight, line height, etc.

6. OceanWP also allows you to use some Google fonts. In case you missed it, just scroll down the dropdown of Font Family and you will find the Google fonts

However, if you cannot find the Google fonts, then it might be disabled. By default, the Google fonts option is enabled. But if for some reason it isn’t, follow the steps below to turn it back on.

1. From the Typography section, go to General.

2. If Disable Google Font is checked, then uncheck it.

Typography is something that you should always think of from the start of your web design project. Selecting a theme that has good typography customization will make your life a lot easier. Various other themes like Evoke, Zilla, Literatum, Moment, Yama, etc. give you a typography customization option.

A theme can provide you with its own way of customizing the typography. You can also style the typography with page builders like Elementor and Visual Composer. Now let’s look at the pros and cons of changing your font with the default theme option:

Pros: 

• Changing your font and typography is quick and easy.

Cons:

•  Limits your flexibility.

• The theme you are using might not include the option for setting the correct typography style you are looking for.

Always clean the cache after changing the font on your site.

Learn: How to Clear Cache in WordPress (Complete Guideline)

How to use Google Fonts in WordPress

Google Fonts has a large library of fonts. Over the years, it has become one of the most popular platforms for developers and designers.

In the previous example we saw, OceanWP lets you use Google Fonts too. But the number of fonts is limited. So, your favorite Google font might not be on the list. Don’t worry, we will show you how to use Google Fonts in WordPress websites.

We will use a plugin for this. The plugin we are talking about here is Google Fonts Typography. It gives you access to the entire library of Google Fonts. It has 1000+ fonts available for you to choose from.

First, install and activate the Google Fonts Typography plugin on your WordPress site.

Once the plugin is installed and activated, you can access it from the customization menu. To change your font with the Google Font Typography plugin, follow the steps given below:

1. From your WordPress Dashboard, hover over the Appearance option. From the Appearance menu, select Customize (step shown earlier in the article).
2. Now in the left side menu, you will see a new option called Fonts Plugin. Click that.

3. Inside Fonts Plugin, click on Basic Settings.

4. Now you will have the option to change your typography. From the Font Family drop-down, select the Google font you want. In this example, we have selected the Alice font.

If your theme doesn’t give you an option to change the font or the typography of your website, you can use this plugin to add those features to your site. But there are some pros and cons to this method as well. Let’s take a look.

Pros: 

• Large collection of Google fonts for you to choose from
• Easy one-click update
• SEO friendly
• Translation ready

Cons:

• Slows down your site a little bit. Regardless of its various perks, more plugins often mean less speed

• You have to purchase the Premium version to unlock some great features of the plugin

There are other plugins besides Google Font Typography. Plugins like Custom Fonts, Use Any Font, WP Google Font, Swap Google Fonts Display, Easy Google Fonts, OMGF, etc. are also preferred by many and are worth checking out.

Learn: How to Fix Error Establishing Database Connection in WordPress

How to enqueue Google Fonts in WordPress

Maybe you don’t want to add any more plugins. And the theme you are using doesn’t provide the typographic option(s) you are looking for. Then what should you do to use Google Fonts on your site? You can try a manual approach.

This might take some time to do, but it is not complicated at all. You don’t need to have coding skills to do it. You can enqueue fonts from any site of your choice but here we will show you how to enqueue Google Fonts in WordPress. To change your font style manually, follow the steps below:

In this example, we will use the Twenty Twenty theme. This is one of the default themes of WordPress that doesn’t have a typography option in the customization menu.

1. First, go to the Google Fonts website. You can browse and see if you like any font. There is a search option as well. For this example, we will use the Raleway font.

2. Now, you can select the format and customize your font. We want to keep this example simple. So we will only choose the Regular 400 and click Select this style.

3. If a menu from the right doesn’t show, then click on the View your selected family from the topmost right corner of your screen. Now, click on the <link> button and select only the link. We do not need the entire tag.

<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

From the above tag only select the link that is in the quotation as shown below:

https://fonts.googleapis.com/css2?family=Raleway&display=swap

Now we have to make changes in the function.php and style.css files.

4. Go to the directory where your WordPress website is installed. Open the wp-content folder.

5. Now open the themes folder

6. Locate your function.php file and open it. If you don’t have a text editor, don’t worry, you can use a notepad to make the changes as well.

7. You have to add a new function to your functions.php file. You can copy and paste the following code and just replace the link (after ‘add_my_font’, ) with your own font’s link. Remember to put the link between single quotations ( ‘ ‘ ). After that, make sure to save your file and close it.

function add_my_font() {
wp_register_style( 'add_my_font', 'https://fonts.googleapis.com/css2?family=Raleway&display=swap');
}
  add_action( 'wp_enqueue_scripts', 'add_my_font' );

Now your font has been enqueued. All that is left to do is include it in the style.css file.

8. Open your style.css file. Depending on the theme you are using, this file might be located in another location.

9. Go back to the Google Fonts website and copy the font family as shown in the image below:

10. Now in the css file, you need to add the following line

body{
Font-family: ‘Raleway’, sans-serif;
}

However, your style.css file might already contain this ‘body’ code. You can find it and place the font family you copied from Google Fonts. Just press Ctrl+F and type in font-family. Then replace the font family with your copied font family

Save your file and close it. Load your website and you will see that you have the Raleway font on your website!

If some of the texts in your site doesn’t have the font you want, then in the style.css file write the code like this:

body,h1,h2,h3,h4,h5,p{
font-family: 'Raleway',sans-serif;
}

Learn: How to Use WordPress RSS Feed, What are the Benefits

Hosting your own font on your WordPress website

It is also possible to host your own font on your server. For this, you need to have your font file(s) locally downloaded. The file format should be .woff

Also, for the font that you want to download and host on your website, you have to make sure that the license allows it.

With that being said, let us get started.

1. First, you need to download the font to your computer. You can download it from Google Fonts, fontspace, etc. We will download our font from Google Fonts. Select the font you want and click on Download all button

2. After downloading the zip file, extract it. You only need the font file which is in the .woff format. You can delete the other files. If your files are not .woff, you can use File Pro Info to convert them.

2. Now you have to upload your files. Go to File Manager from cPanel and open the folder of your WordPress website. From there go to wp_content > themes > twenty twenty. Here, we have used the Twenty Twenty theme, you should select the theme you are using.

Create a folder (for example: ‘fonts’) to put your fonts in. Consider using a child-theme for your fonts and style.css.

4. Next, you need to add some code to your style.css file. Add the following code:

@font-face{
font-family: 'raleway-regular';
src: url('fonts/ralewayt-regular.woff')format('woff');
font-weight: normal;
font-style: normal;
}

If you want to add different font styles then you need to repeat this snippet. The code will look like this:

font-face {
font-family: 'raleway-regular';
rc: url('fonts/ralewayt-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'raleway-bold';
src: url('fonts/ralewayt-bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'raleway-light';
src: url('fonts/ralewayt-rlight.woff') format('woff');
font-weight: light;
font-style: normal;
}

Make sure that these files can be found within your fonts folder in your WordPress theme directory.

Hosting your fonts locally has many benefits. It might take some time, but it also opens your website up to new fonts. It is also found that hosting fonts locally might increase your site speed. But as with all WordPress websites, I recommend that you verify this yourself and see if you get a better result by hosting your own fonts.

Conclusion

The fonts that you use are a big part of the entire aesthetics of your website. Fonts may change the look of a bland website and make it aesthetically pleasing.

If you are designing your website, you want your visitors to be pleased with your design. You would want your visitors to explore your website. To do that, your typography has to be perfect like the colors, shapes, and other design elements on your website.

Many people take fonts for granted and that is a mistake. You should spend some time and explore what fonts better fit your website’s style and overall outlook. Then you can decide whether you would want to host them locally or not. It depends on how much you want to invest in your fonts. Whatever method(s) you choose, make sure that you have the right font for your website.