How To Change Your Fonts In WordPress

How To Change Font WordPress
Changing fonts on your WordPress website can be a brilliant way of freshening up your content, adding personality and style to engage your readers.

It’s safe to say, then, that your website’s font style can make the difference between an aesthetically dreary site or an exciting, interesting one that encourages readers to return time and again.

However, building and maintaining a website through the ever-updating WordPress web server can, at times, be as confusing as it is rewarding. Thus, to the uninitiated, changing or adding custom web fonts can seem like more trouble than it’s worth.

But if you can do it, adding web fonts can make a world of difference.

So, how do you change fonts in WordPress?

Well, the WordPress design experts at White Peak Digital have developed the following simple guide to help you do just that.

Loading Your Own Custom Fonts Onto WordPress

Loading your own scheme of custom web fonts onto WordPress can enable you to give your site a unique aesthetic that makes it stand out from the crowd and enhances readability.

As a result, this can help increase optimise organic traffic, extend the amount of time users spend on your site and increase the likelihood of their return. That said, it’s also worth noting that WordPress themes do come with their own appealing font styles.

Website Fonts WordPress

However, if you’re keen to add your own web fonts, then there are countless websites that provide font files for precisely that purpose. These include Google Fonts, Fonts.com and many more.

However, no matter what your source, you can add your desired fonts to WordPress via one of 3 methods:

  1. Manually enqueue Fonts onto WordPress
  2. Change the font family via means of the theme stylesheet
  3. Use a plugin

Admittedly these 3 options can seem a little daunting to anyone with no more than an average experience of website building. However, when spelled out in plain terms, even newcomers to WordPress can upload the fonts that they desire.

How To Go About Loading Google Fonts Onto WordPress

If you don’t want to add another plugin to your WordPress website, you can manually upload new fonts via means of code by enqueueing them, and you can do that by following these steps.

Identify Your Font

First, identify the font or font family that you want to transfer over to your WordPress website.

Once identified, add it to your Google Font(s) library by clicking the corresponding “+” button.

Copy the Code

After that, click the “View Your Selected Families” icon at the top right of the screen. Here you’ll see the font’s bespoke CSS code – the information required to add it to your site.

In particular, a specific section of the “Link” code is required for WordPress, and as we’re going to enqueue the font(s), that section can be taken from the 3rd line of the code.

An example link code might look as follows (for ease, I’ve highlighted the section that needs replacing).

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap" rel="stylesheet">

Enqueue Your Font(s)

Once copied, open WordPress and open your theme’s function file. With your new font’s code inserted, it should look something like this (again, I’ve highlighted the code that needs replacing):

function add_google_fonts() {
wp_register_style('googleFonts', 'https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts', 'add_google_fonts');

Enqueuing Complete

Process complete, your new font(s) style has been successfully enqueued from Google. To add another font file, simply add another line of code or add your new font(s) code to the same line.

In order to use your new web font, however, you need to add them to your stylesheet.

Change The Font Family Using The Theme Stylesheet

Head to your theme and open its style.css file.

There, you can simply paste the font’s code to style the specific elements of your site. However, make sure you paste the new CSS file code in after any pre-existing CSS code.

Finally, save your stylesheet and check to see if the changes have been implemented.

Doing It The Easy Way – Use A Plugin

Using a WordPress plugin is by far the simplest method of adding CSS fonts to your WordPress site. For those of us who aren’t confident with code, this method is highly recommended.

Once you’ve chosen your preferred font(s), simply install the Google Fonts Typography plugin and turn it on.

Wordpress CMS Website Backend

After that, from your WordPress dashboard, head to Appearance > Customise > and click on the link for Google Fonts.

Therein, in the “Basic Settings“, you’ll be presented with three drop boxes under the headings: Base Typography, Headings Typography and Buttons and Inputs Typography.

You can select your chosen font from there.

Wrapping It Up

Ultimately, the best way to add a custom font to your WordPress theme depends on your experience with the software.

WordPress experts and coders will feel comfortable tweaking code while amateurs will (and probably should) settle for the plugin.

The latter is the easiest option and reduces the risk of causing damage to the rest of your site.

FAQs

Can I Change The Font In WordPress Without Plugins?

Absolutely. You can add custom fonts via means of enqueueing or by copying them into your theme’s stylesheet.

What Default Font Comes With WordPress?

WordPress has numerous default/free fonts to choose from and which fonts you can automatically use are often dictated by the website theme you employ.

That being said, the top five most common fonts are:

  • Script Fonts (cursive, calligraphic)
  • Display Fonts (characterful, creative)
  • Modern Fonts (simple, serious, straight)
  • Serif (traditional)
  • Sans Serif (clean, modern)

Can I Use A Google Font In WordPress?

Yes. You can use a Google Font via various means in WordPress, the simplest of which is to install Google’s dedicated font plugin.

Can I Change The Font Size In WordPress?

You can. Happily, changing font size in WordPress is more straightforward than adding different fonts to your site.

While editing your page/article, simply highlight the section you wish to alter and select the font size within the font options box located in the WordPress customizer window to the right of the page.

To your success,
Jackson

About The Author

Jackson Gartner

Jackson Gartner is a web designer and the founder of White Peak Digital. He has a background in website design, branding and customer experience. In his free time, he enjoys motorsport and spending time with his friends and family.
4 Comments
Inline Feedbacks
View all comments

Thanks mate, this worked well

Thank you for your help with this, these steps worked perfectly to change the font on my wordpress site!

WordPress vs Squarespace

WordPress Vs Squarespace in 2021

If you’re planning on making your own website, then you’re probably wondering which website builder you should use. There are loads of options available these days and it can be difficult to know which platform is going to be best for you.

How To Install WordPress Themes

How To Install WordPress Themes

Do you want to know how to install WordPress themes? There are lots of themes, or templates, to choose from, and if you’re a beginner, you’ll probably want to try a few out until you find the correct one for your website.

FREE DISCOVERY SESSION

Interested in a free, no obligation consultation?

Get in touch with us today so that we can setup a time to introduce ourselves and go over your project one-on-one.