How to Change Font in WordPress Site?

There are millions of WordPress sites using few popular themes that look similar in all aspects. Using different fonts is one of the easy ways for people to make their site unique. Even though this may seem like an easy task, sometimes it’s a bit complicated. In this article, we will explain few methods about how to change font in WordPress site. Depending on your skills and WordPress knowledge, you can choose which one of these methods is best suited for you.

Precautions Before Changing Font

Before you proceed with changing your font, you might want to take few precaution measurements. Even though this is not a significant change that you will make on your website, it’s better to be safe than sorry. 

• One of the most important measurements you will need is to take a backup of your site. By doing this, you will prevent any future troubles you might encounter. This is especially helpful especially if you are playing with theme’s CSS.   
• Decide the font family you want to use on your site. Besides standard font families like Arial (sans-serif), Times New Roman (serif), etc. Google offers 700+ custom fonts. Therefore, choose the family you want to use on your site.
• Font change may affect the site’s layout. Hence, make sure to choose the correct font that suits your content and layout.
• Another step you can take is changing your font in a test website. By doing this, you will learn how to perform this task without missing anything on your live site. We strongly recommend doing this to avoid making changes to your live site that was running for long time with different fonts.

1. Changing Fonts from Theme Settings

The first and easy method of changing font on your website is using the build-in font changer. Most of the commercial themes offer typography options in customizer section to adjust the font and spacing settings. Just be on the lookout since some themes might not include this feature, or if you are using the free version of it, this feature might be available on the Pro version.

For us to show this, we will use the popular “Astra” theme.

• First of all, go into “Appearance > Customize” section on your WordPress admin panel.
• Then go into “Global > Typography” section inside the customizer.
• There you will find two options, “Base Typography” and “Headings.”
• Base Typography allows you to make changes to your website’s body and content. Here you can change the font family, size, weight, line height, and the bottom margin of the paragraphs.

• Under “Headings” section, you can change the font family, size, and line-height for all the headings that your website might have, from H1 to H6.

Using typography options of your theme is the best option as the developer might have tested for all the available fonts and variations. This will reduce your testing effort and most probably you can do the changes on the live site in few minutes.

Note that themes like Astra and GeneratePress allows you to choose system font for your site. This means the site will use font from the device it is being viewed. Since this will remove the loading time of font files from your domain, your page loading speed will drastically improve.

2. Changing Font with Plugin

Plugins are among the most useful features on WordPress; you can practically do almost anything with them. Changing your font is no different, especially if your theme does not offer typography options. There are plenty of plugins that can do this for you.

• Go to the “Plugins > Add New” section of your WordPress dashboard.
• Search with related terms like “font.”
• You will see many different plugins like Easy Google Fonts, Fonts Plugin, Google Fonts Typography, and Use Any Font and Custom Font Uploader.  Going with the best rated and most downloads is an easy way to select the best plugin. 
• In this example, we will use “Fonts Plugin” to customize the fonts on your site. Once you have installed the plugin, activate it like any other plugin you use.

• The plugin offers a free quick start guide. You can either get their guide on your email or ignore the guide to customize the fonts yourself by going to “Fonts Plugin > Customize Fonts” section.
• This will take you to Customizer, where you can perform the font changes.
• You can go into basic settings to change the font or advanced settings if you want to change the font for different parts of your website. 

• You can change the font for your content, headings, and buttons under the “Basic Settings” section.

• While on the “Advanced Settings,” you can go into more detail and change the font for branding, navigation, content (here, you can change the font for titles, headings, and other parts of your content), sidebar, footer, and load fonts only.

• After selecting your fonts, you can preview your content instantly and view how your content looks. If everything looks fine, click on the “Publish” button to make the changes effective on your live site.
• Apart from changing the font, this plugin has a few more useful tools that will help you with this whole process. Font loading is one of them; this helps with optimizing your site’s performance by unchecking any font weights that are not in use. Debugging helps with troubleshooting any errors that your site might have with regards to fonts.

3. Changing Font Through CSS

This is not a recommend method especially for beginners without appropriate knowledge of using fonts in CSS. In addition, you should be careful since you are going into the website code. So be cautious with what you edit, remove, and add. 

• Go to the “Appearance > Theme Editor” section in your WordPress admin panel.
• You can ignore the warning that WordPress shows to avoid editing theme’s files.
• Select your active theme; in this example, we will show with the default twenty-twenty theme.

• Once you are there, WordPress by default open the Stylesheet called style.css. This is generally available as a first file; you need for changing fonts on your website.
• Add the below code in order to change the font for your whole website.

*{font-family:" Name of your font"}

• You will also need to define your font family at the top of the style.css; you can do this by adding these lines. Learn more on using font-face property here.

@font-face {
font-family: "Name of your font";
font-weight: 100 900; /*These will decide how thick or thin your characters will be */
font-style: normal; /*Here you can put your style as normal, italic, or oblique*/
src: url (URL from which you got the font) format("format of font");
}

• For the site level changes, you can also insert CSS code under “Appearance > Customize > Additional CSS” section.
• If you want to change the font for just a section of your website, you will have to look for the section first. Once you find it in your code, you can add the same line or modify the existing one. For example, in the image below, you will see your website’s body section and what kind of font it is using. You can also change your font size if you desire to make it bigger or smaller. 

• After adding or changing the code, you will have to scroll down the page and press the “Update File” button. By doing that, your website should change the font automatically.

When you play with CSS, you have to load only the required fonts and delete unused fonts from your site. However, this will be highly difficult task for beginners as some themes use multiple fonts in CSS making the code more complex to read.

Will Font Change Affect My SEO?

The answer is yes, font change will affect your search engine ranking if you do not plan and do it properly.

• Loading font files will affect the page loading speed. Google PageSpeed Insights and other speed measurement tools will show warnings when fonts prevent the page content to load. In order to avoid this, choose only required font weightage to avoid loading bunch of font files on your site. as mentioned above, “Fonts Plugin” can help in this to load only required font weights. When you use theme settings or custom CSS, make sure to take care of this.
• You have to preload font files used on your site to remove preload key requests errors in Google PageSpeed Insights. Learn more on how to preload font files in WordPress.
• Make sure to have proper size and spacing on your site’s layout. Otherwise, you will see errors in Google PageSpeed like elements are too close and smaller font size.
• Using external font like Google Fonts will increase the loading time and hence slow your site. You can use caching plugins like WP Rocket to optimize and combine all external Google fonts you use.
• When you change the font, Google and other search engines will try to find the previous font files on your site. this will cause 404 errors as you would have deleted old fonts. Generally, you do not need to set 301 redirects for missing font files and ignore them as these errors do not affect users.

On other hand, if you have slow loading website, check the above-mentioned font issues. Probably changing to new font can help to improve the speed.