How To Change Fonts In WordPress

Fonts play an important part in any site. They can make or break the looks of the page and if you pick up the wrong font, you can easily give the wrong message to the users. There’s also the fact that some fonts are much more readable in large or small sizes or when they are normal or bolded. In this article, we will teach you how to change fonts in WordPress.

How to change fonts in Elementor

If you are using Elementor as your page builder changing fonts is quite simple. Simply head on to any page you have created with Elementor and click “Edit with Elementor”. After landing on the site editor click the bottom left corner cog and you can find the “Settings”. In “Settings”, select the “Hamburger” menu from the top right and head on to “Site Settings”. At “Site Settings” select “Global Fonts”.

The full route is Elementor Editor’s Panel > Hamburger Menu > Site Settings > Global Fonts

In “Global Fonts” you can easily select the fonts you want to use on your WordPress site and change them all at once.

If you wish to bring in custom fonts, you are going to need the Elementor Pro plugin. To add new custom fonts, head on to your WordPress dashboard go to Elementor > Settings > Style. Here you can easily import new fonts that will then be available in your Global Fonts menu and everywhere else in your Elementors side editing.

How to change fonts in Astra theme

If you are using Astra as your main theme you can easily edit your fonts, by going to your WordPress Dashboard and selecting Appearance > Customize > Global > Typography.

Here you can easily change the fonts of your whole page from your body to heading fonts and everything between. You can also choose the fonts size, weight, and line-height. Or if you wish, you can grab a few of the presets Astra has created.

If you wish to customize even more of your fonts, we recommend getting the Astra Pro to do so. It also unlocks other features like white labeling, blog and site layouts, and many other features.

How to change fonts in Kadence theme

Kadence offers easy ways to edit your fonts. Simply open your WordPress Dashboard select Appearance > Customize > General > Typography. Here you can edit every single aspect of your WordPress fonts.

If you want even more ways to edit your Kadence theme, consider buying the Kadence Pro theme.

How to change fonts through style.css

What if you’re not using a page builder or a professional theme? How do you add a custom font to WordPress so you can then change your WordPress fonts to that font? To add a new font to your WordPress you are going to first need to download the font’s TTF and WOFF files to your server. Another way to add these fonts is to simply reference them in your style CSS and tell where the browser can load the fonts.

Creating custom fonts folder

If you wish to host the fonts locally the first thing you need to do is to create a fonts folder that needs to be added to your theme folder. Remember to name the new folder named “fonts”.

Here’s an example of the folder structure:

bloginbox.com/wp-content/themes/theme-name/fonts

Remember to change the “bloginbox.com” and “theme-name” with your own URL and themes folder name. We are going to need these later on.

Where to download free custom fonts?

If you wish to use free fonts, you can use Google Fonts for this. Simple head on to https://fonts.google.com/ to download the fonts you wish to use and you will be given a zip file with the fonts you selected.

Adding the new fonts to WordPress

Since we are hosting the fonts on our own server where the site is located we need to extract the fonts we want to use and load them to the “fonts” folder we created earlier on. After this, we can access them through the URL shown before.

To add the fonts to your theme we need to head to the style.css file. You can access it by going to your WordPress Dashboard and going to Appearance > Theme Editor and selecting “style.css” or editing the file in the server.

In the style.css we are going to need the following code:

@font-face { 
font-family: 'Roboto'; 
src: url(https://bloginbox.com/wp-content/themes/twentynineteen/fonts/Roboto-Regular.ttf); 
font-weight: normal; 
}

• @font-face – Tells we are adding a new font.
• font-family – This is the name of the font.
• src – Tells the site where it can find the font file.
• font-weight – Tells what weight the font should be.

Now you can change your WordPress fonts in titles and every other element in your site to the one you want by simply adding the font to them in the style.css. For example, let’s change the H1 titles to newly added Roboto-font and give it a backup font ‘Sans-serif’:

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 55px;
}

This piece of code will change the H1 titles font-family to Roboto, set the font-weight to normal, and change its size to 55 pixels.

How to import fonts to WordPress

Now if we don’t want to host the font files directly on our own server we can always import them. Usually importing is the preferred way since it’s a much simpler process.

To import a font from Google Fonts, for example, we simply add the fonts we want to import and then embed a small piece of code to our style.css file.

For example, if we wanted to import the “Roboto” font we could import it by adding this code to our style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

This code can be grabbed directly from the Google Fonts by simply selecting the fonts we want and then selecting the “Import” option from the right. After this simply copy and paste the “@import” part.

Conclusion

Changing the font in WordPress can be done quite easily if you are using a premium theme like Kadence or Astra or using a page builder like Elementor Pro. Though if you are not using a page builder or a professional theme it can be a bit tricky, but not impossible. The most recommended way to add new fonts is through the “@import” in your style.css, but as we showed you can also host your fonts on your own server.

Comment below and tell us how you added fonts to your site or if we managed to help you.