How to Change Font in WordPress Block Editor [3 Easy Methods]

Are you searching for an easy way to change font in WordPress block editor? If so, then you’ve landed on the right page.

The fonts you choose for your website play an important role in its design. You can make a huge difference to the appearance and usability of your website by using the right fonts.

Once you’ve decided on the perfect fonts, you need to know how to implement them. The WordPress block editor offers several ways to change fonts.

In this post, we’ll discuss each method in detail and show you how to change font in WordPress block editor.

Ready? Let’s get started.

Why Change Font in WordPress Block Editor?

Each WordPress editor has its own default fonts. However, almost every WordPress editor, such as Classic Editor, Gutenberg Block Editor, etc., supports custom fonts.

This begs the question: Why should you or any other WordPress user learn how to change font in WordPress block editor?

Well, there are a couple of reasons why you might want to change fonts, such as;

• Theme Changes: When you switch to a new WordPress theme, the default fonts might not match your previous design. Knowing how to change font in WordPress block editor helps you maintain your site’s original look and feel.
• Editor Transitions: Moving from the Classic Editor to the Gutenberg Block Editor can cause font changes. To make a smooth transition and maintain consistency, you need to know how to modify fonts in the new editor.
• Customization Needs: Some WordPress themes come with set font styles and sizes. If you want to customize particular sections with unique fonts, understanding how to change fonts will be extremely helpful.
• Client Requirements: If you are designing a website for a client who has specific font preferences, you must be able to adjust the font style and family to meet their needs.
• Better Design: Fonts significantly impact the aesthetic and readability of your website. Being able to change fonts allows you to enhance your site’s design and user experience effectively.

NOTE: If you don’t have the Gutenberg editor enabled on your WordPress site, check out our detailed guide on how to enable Gutenberg editor in WordPress.

3 Easy Ways to Change Font in WordPress Block Editor

Each method we are going to explain below will enable you to change the font in WordPress. You can choose any of the methods that are specific to your needs.

Method #1: Change the Font in the Site Editor

This method allows you to change the fonts on your site if you use a theme that supports the site editor.

To determine if your site uses the site editor, check the Appearance section in your dashboard. If you see “Editor” listed, you can follow the steps below to change the font on your site:

1. Login to your WordPress dashboard as an administrator.
2. Navigate to Appearance → Editor from the left menu.
3. Click on the “Styles” option from the left-hand side menu.

4. Next, click on the pencil icon to edit the style.

5. Now, select the Styles icon as shown below. The icon looks like a black-and-white circle.
6. Then, select Typography.

7. You can then select from the following text elements on your site:
   • Text
   • Links
   • Headings
   • Captions
   • Buttons
8. From the Font dropdown, choose your desired font. The text will update to show your selected font, allowing you to preview the changes.

9. Finally, click “Save” to apply the new font.

Method #2: Change the Font of an Individual Block

The first method allows you to change the font for a particular element, which applies to the entire site automatically. 

However, if you want to change the font of a certain Gutenberg block, then follow the steps below:

1. Visit your WordPress.com dashboard.
2. Go to Posts or Pages and click on any post or page that you want to edit.

3. First, select the particular block within the content, and from the sidebar, go to the styles section under the block section.

4. Scroll down and click on the three dots to access the Typography menu.
5. Here, select ‘Font Family,’ and you’ll see the ‘Font’ field, which will appear right under ‘Typography.’

6. Simply click on the ‘Font’ field and select your desired font. The text font will change in real-time to your chosen font.

7. Lastly, don’t forget to click the ‘Update’ button on the top right to save your changes.

Method #3: Change Fonts in the Customizer

If you are using any of the classic WordPress themes, you can change the font settings in the Customizer.

To check if your site uses a classic theme, go to Appearance → Customize in your dashboard. If you see a “Fonts” option, you can change the fonts on your site by following these steps:

1. Sign in to your WordPress dashboard.
2. Navigate to Appearance → Customize.
3. Next, select the ‘Fonts’ option from the menu.

4. To see the available font options, click the dropdown under Headings or Base Font:
   • Headings: This applies to all headings on your site, such as post and page titles, widget titles, comment headers, and headlines within posts and pages.
   • Base Font: This is used for the main body text and site menus.

5. Choose your desired font from the dropdown menu. The text will update to reflect your choice, allowing you to preview the changes.
6. Click “Save Changes” to apply your new font choices.

Depending on the font you select, you may have additional options:

• Font Style: To adjust the style of your heading fonts, click the option below and to the left of the font dropdown. The available styles will depend on the chosen font.
• Font Size: To change the size of your heading or base fonts, click the size option below and to the right of each selected font and select a size from the dropdown menu.

Wrapping Up

To create a user-friendly and visually appealing website, you need to change font in WordPress block editor. Whether you’re customizing site-wide fonts through the Site Editor, adjusting fonts for individual blocks, or using the Customizer for classic themes, the methods we have outlined in this guide are simple and clear. 

Using these methods, you can make sure that your website aligns with your branding and design preferences. Moreover, by easily changing and customizing fonts, you can enhance the readability, aesthetics, and overall user experience of your WordPress site.

If you have any questions, ask in the comment section below. We would love to answer! 

Frequently Asked Questions

Is it possible to change font in WordPress?

Yes, depending on your theme, you can change fonts in WordPress using the Site Editor or the Customizer.

How to use a custom font in WordPress?

You can use custom fonts by uploading them via plugins like Google Fonts Typography or by adding custom CSS to your theme’s stylesheet.

How do I add custom fonts to WordPress Gutenberg?

To add custom fonts to Gutenberg, you can use a plugin or custom CSS. Some themes also provide built-in options to upload and use custom fonts.

How do I add custom fonts to WordPress without Plugins?

You can add custom fonts without plugins by uploading the font files to your theme’s directory and linking them in your theme’s stylesheet using the @font-face CSS rule.