How to Change Fonts in WordPress Gutenberg (2021)

How to Change Fonts in WordPress Gutenberg (2021)

Typography is one of the most important elements in web design and plays a vital role in your branding. Learn about how you can customize the fonts in your WordPress site!

If you’re looking to change the font on your WordPress website to pattern it to your branding, some may feel that it’s not a very straightforward process and may need some additional steps.

Here are various ways to change the font of your website, you can use any method depending on what you’re comfortable with doing.

Changing Fonts Using the Customizer

The typography settings in the WordPress Theme Customizer will vary depending on what theme you’re using. Some may have an extensive font library, while others like the default themes that come with WordPress, may not have typography settings at all.

To check whether your theme comes with typography options, you can try going into the Customizer. The Customizer can be accessed by following these steps:

  1. On your WordPress dashboard, hover over Appearance and click Customize.
Accessing the WordPress customizer to customize typography
Accessing the WordPress Customizer
  1. In the left panel, look for any font styling or typography settings. For example, in the WordPress theme Blocksy, they have integrated Google Fonts into their options:
Typography settings in Blocksy
Typography settings in Blocksy

Changing Fonts Manually via Additional CSS

You can use the Additional CSS settings in the Core section of the WordPress Theme Customizer to configure the typography settings in your website.

This can be located at the bottom of the menu panel in the theme customizer.

Accessing the Additional CSS section in the customizer
Accessing the Additional CSS section in the customizer

If you’re not familiar with using CSS, you can read more about CSS font properties here. The advantage of using CSS is that you can alter the typography globally or to specific sections of your site only. Here’s an example of a CSS syntax that will change the font settings of the whole body of your website:

body {
    font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
    font-size: 16px;
}

If you’re wondering, the long list of font families I’ve used above is what you call a web safe font stack. Web safe font stacks are lists of font families which look similar. If your visitor’s browser doesn’t have one of the fonts, then it will try the next one, until it finds one that’s present in the visitor’s system. Kinsta has an amazing list of different web safe font stacks that you can use.

You can use Google Fonts using this method, but it requires some additional work to get them working correctly. First, head over to the Google Fonts page and pick one that you would want to use.

Selecting a font in the Google Fonts library
Selecting a font in the Google Fonts library

Select the style you prefer by clicking the “+ Select this style” button. 

Selecting a font style in the Google Fonts library
Selecting a font style in the Google Fonts library

A modal will appear where you could download the font locally or use it for web. To use it for your WordPress website, select the @import option. Then paste these codes to the Additional CSS section in the customizer.

CSS codes for Google Fonts

Your code should end up looking like this:

@import url('https://fonts.googleapis.com/css2family=Roboto:wght@100&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

Changing Fonts using Plugins

There are a variety of plugins available on the WordPress plugin directory that can help you customize the fonts on your website. 

Fonts Plugin

Fonts Plugin claims to be the #1 font plugin on WordPress. It is a subscription-based product with a font library that consists of 1000+ fonts and has various font styling options. Additionally, this lets you change the font within the WordPress block editor, in case you want to style the sections of your website differently.

Easy Google Fonts

Easy Google Fonts by Titanium Themes is a free plugin that integrates Google fonts into your WordPress theme without the need for you to code yourself. It works well with any WordPress theme and has over 600+ fonts to choose from. 

Typekit Fonts for WordPress

Typekit Fonts is a great companion if you prefer using CSS to change the font of your website. It is a subscription-based plugin that gives you access to their font library. It works similarly to the Google font library–you can import typekit fonts into your website by adding it to your CSS. 

Changing Fonts using Block Collection Plugins

Since the introduction of Gutenberg, there have been many Gutenberg block add-ons that have advanced font styling options. Thanks to these block plugins, you have the freedom to style your website’s typography however you want! These include Stackable, Kadence Blocks, GenerateBlocks, and more. 

Here’s a peak of how we, Stackable, give you complete control over styling your website’s typography

Recap

There are multiple ways to change the typography for your website. Depending on what you know, or what your website needs, there is a perfect solution for you!

Here are the three different ways you can customize your website’s typography:

  • Typography settings in the WordPress theme customizer
  • Manually adding CSS
  • Using font plugins
  • Using block plugins with advanced typography options

Disclaimer: This article contains affiliate links to products. We may receive a commission for purchases made through these links.

Want to learn more
about Stackable?

Your very own Learning Hub for all things WordPress and Stackable. Find the right resources to help get you started as you begin building your online presence with Stackable.

2 thoughts on “How to Change Fonts in WordPress Gutenberg (2021)

  1. Wao! Such an informative article. I am a content writer and your information about Gutenberg Editor is so helpful for me. It is also great for all beginners.

    Thank you so much for sharing these amazing step-by-step details.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.