How To Change Fonts In WordPress Gutenberg Editor [3 Ways]

Posted on January 25, 2022March 7, 2022 Posted by Faguni Categories Gutenberg, Tutorial

It can be challenging to change fonts in WordPress if you have not had enough familiarity with integrating custom fonts. Especially, when you have recently shifted to the new default WordPress editor you might get lost when you are looking to change fonts in Gutenberg. So, today we will guide you thoroughly so that you can efficiently change custom fonts in WordPress Gutenberg. 

First things first, let’s take a look at the web font terminology. A web font, also known as an HTML font, is one that resides on a third-party site and is linked to your site. You can also host fonts locally on your website server. There are a limited number of fonts that are installed on virtually all computers, so you can be confident that those fonts will be accessible to your visitors.

Reasons You Might Want To  Change Fonts In WordPress Editors?

Every WordPress editor comes with its own style of fonts. However, almost all popular editors, such as Classic Editor, Gutenberg block editor, etc. allow you to add custom fonts. Now the concern is why you and other WordPress users should know how to change fonts in WordPress.  We will now explore the major reasons that lead users to learn how to change the fonts in WordPress editors. 

🎯 Due to getting a new WordPress theme, your content fonts can get changed. If you want to redeem the change, then you should learn to change fonts in WordPress.

🎯 Same goes for changing to a different WordPress editor. If you want to continue with custom fonts in the newly activated editor, then you need to learn how to change fonts in WordPress.

🎯 As mentioned above, certain WordPress themes and editors comes with certain font size and family. When it comes to designing certain sections with custom fonts, understanding how to change the fonts will be very helpful.

🎯 Furthermore, if you are working for someone else and they want the WordPress site in a particular font style and font family, then this guide will definitely be useful.

Let’s Discover Default Options To Change Fonts In Gutenberg

Before checking out the additional options to change fonts in WordPress, let’s take a look at what the default WordPress editor has to offer. Gutenberg block editor comes with its own font ‘System-UI’. As Gutenberg editor is mainly focused on blog writing, it comes with various font sizes and styles. 

You can utilize them to give a stunning appearance to your blogs, landing pages, etc. at present, there are 8 types of font sizes available. They are, default, extra small, small, normal, large, extra-large, huge, and gigantic. 

Also, if you want to use a custom font size, then that option is also available. Go for ‘Custom’ as your font size and add your preferred pixel size. Moreover, you can give custom font sizes to defined types also. Such as customizing Medium font size pixels and all.

Also, headings fonts in Gutenberg come in different sizes. You will find headings of H1, H2, H3, H4, H5, and H6. In light of the above options, it can be concluded that Gutenberg comes with customizable font sizes. So, it makes it easier to change font size in Gutenberg. But when it comes to changing the font family, there is no facility in Gutenberg. You have to use the default font family. Or change the WordPress theme to use fonts from other families.

While we are talking about default WordPress editors, let’s have a look back at the former default editor’s available features to change fonts in WordPress. In the Classic editor, font changing options are also limited. You only can change the font size, not the family. This allows less room for customizing fonts in WordPress.

Top 3 Ways To Change Fonts In WordPress Gutenberg Block Editor

Due to font changing capabilities in default WordPress editors, it might be better to use other external options to change fonts in WordPress Gutenberg instead. Here we have listed down the top 3 ways to change fonts in WordPress.  

 1. Get Easiest Plugins From WordPress Repository

If you want to avoid custom coding to get your preferred font to your WordPress website, then the best way is to get a rich font library to your website. And in the WordPress repository, you will find many font library plugins for free. In this way, multiple fonts will be available for your website, as well as easily change fonts in Gutenberg block editor and other editors. 

Currently, Easy Google Fonts is the most popular plugin with stunning features to add custom fonts. Using this font library plugin, you can create theme-specific font controls for particular CSS selectors in the admin area. Custom font controls can be created in the customizer and made immediately available in no time. Today, you can insert 600+ Google fonts and font variants into your website without writing any code.

Right after you install and activate the plugin, all the Google fonts will be available in your WordPress Customize option. Choose your favorite font family and change fonts in WordPress right away. 

2. Change Fonts In WordPress Manually With CSS 

If you have basic ideas about coding in CSS, then you can easily change fonts in WordPress with custom coding. The first thing you need to do is go to Appearance → Customize → Additional CSS from your WordPress dashboard. Here, you can add custom code to change fonts in WordPress Gutenberg to your site. Here we are sharing CSS codes that you can easily copy and paste to your website CSS field. 

Change Fonts In Website Body:

If you only want to change fonts in WordPress website body, then follow this code: 

body { font-size: 16px;}

Change Fonts In Paragraph: 

Additionally, if you want to change the font size of a paragraph to 16px, you should use this CSS code:

p {font-size: 16px;}

Change Custom Fonts For headings:

Also, if you need to change the font size of your headings, you can do so with the following code:

.entry-content h2 {font-size: 36px;}

Change font family In WordPress:

With custom coding in CSS, you can change the font family as well. To change the font family of the paragraph, use this code to change the font family to Verdana:

* {font-family:"Verdana", Verdana, sans-serif}

To change the font style of headings, use this code: 

h2{ font-style: italics;}

Whenever you change fonts in WordPress using CSS codes, be aware that you are making changes site-wide. Before proceeding, create a full backup of your site.

3. Upload Your Own Custom Fonts In WordPress

Apart from choosing created fonts, if you want to use your own created fonts, then you can also do that in WordPress Gutenberg. You can host custom fonts that you have on your computer on your website server. 

If you want to do this, you will need to enter your web server’s file manager to create custom folders and upload fonts. It is likely that you have access to cPanel if you are using any of the most popular WordPress hosting companies. For managed hosting services such as Kinsta or WP Engine, you have to use a file manager plugin such as FileZilla or an FTP client such as FileZilla.

For easier management of your fonts, instead of uploading them directly to your theme folder, create a folder called fonts. Once you’ve downloaded your custom fonts, you can save them to this folder. On the other hand, in this process, you can also upload custom fonts from Google Fonts and add them to your server font file.

Get Started With Custom Fonts In WordPress Gutenberg

Hopefully, these above mentioned ways will help you to change fonts in WordPress Gutenberg successfully. So what are you waiting for? Start following these easy steps and change fonts easily. To get more of these kinds of tutorials, blogs, and insights, subscribe to your blog. Also, join our Facebook community to get connected with other WordPress users.