How to change fonts in WordPress?

Font selection is considered a minor detail, but it is an important aspect of web design and brand identity. The process of changing fonts in WordPress is not as simple as you might think because it is directly affected by your WordPress theme. In this article, we are explaining the importance of font choice in web design and presenting you with how to change fonts in WordPress.

Why Font Choice Is Important In Web Design?

There are many reasons why you should pay attention to the font choice. Some of the most highlighted reasons are mentioned below:

It Contributes To Your Brand Tone And Feels.

Your brand’s tone and feel aren’t determined by a single factor. A user’s overall impression is formed by the combination of several elements. Typography is important in this because it interacts with your brand colors, imagery, copywriting, and other web design elements to create an overall impression. To achieve a cohesive and impactful online presence, partnering with a skilled web design agency can ensure that all these elements are perfectly aligned with your brand’s vision and goals.

It Helps Captivate Your Audience.

Typography immerses users in a web experience and helps to emphasize the importance of your message. This can include using large or bold fonts. It can also include the use of colored fonts, underlined text, and contrasting styles.

It allows you to connect with other audiences.

Strategic typography use can assist you in adapting your brand to connect with different segments of your audience while adhering to your brand guidelines.

It Creates A Distinct Informational Hierarchy.

Font size, placement, font-weight (thickness of the letters), and color, among other techniques, can be used to establish hierarchy. This allows users to quickly scan your website and identify the most important information.

It Delivers A More Intuitive User Experience.

Typography contributes to user navigational clarity by providing a clear path through your website. It enables them to obtain the information they require when they require it. It also makes it simple for them to make decisions and take action.

It Helps Create A Cohesive Brand Across Channels.

Consistently executed typography contributes to the creation of a cohesive brand that leaves a distinct impression on users.

This is especially true across channels, where consistent typography reinforces your brand identity, whether someone interacts with it in the digital realm (on your website, in digital advertising, on social) or on an analog asset like a billboard on the side of the road.

It Builds Brand Recognition.

Typography that is visually appealing and well-executed should stick in the minds of consumers. Some businesses even design their own typefaces for their brand. However, your typeface selections do not have to be unique or out of the ordinary in order to be memorable.

Using typography consistently and cohesively creates a link between your typefaces and your brand. Consumers will associate a particular typeface with your brand if they see it frequently.

How To Change Fonts in WordPress?

There are 3 ways to customize font in WordPress, namely:

• Check out the WordPress theme you use on your site
• Use a plugin
• Add custom fonts

Keep reading for further details.

#Method 1: Check Out Your Theme or Page Builder’s Font Options

First of all, you should take a look at the theme you use on your WordPress site to check if it allows you to change fonts on your site.

There are many WordPress themes out there that enable you to edit typography on your site. You can check if the theme supports it in the Customizer’s menu options.

To access the theme customizer, from the WordPress dashboard, click Appearance > Customize

Then, select Typography to customize fonts on WordPress site.

Then, you can see the sections where you can change fonts.

With Woostify theme, you can edit fonts in the Body part, Primary menu part, and Heading part

Within such parts, you are not only able to change fonts but also do other typography customization like resizing, customizing the variants, line height, color, and etc.

#Method 2: Use a WordPress Font Plugin

If the theme you are using does not support you to change fonts, you can install a plugin to do that. You can check out the following WordPress font plugins:

Easy Google Fonts

The first plugin in the list is Easy Google Fonts that helps you easily to add custom google fonts to any WordPress theme without a line of code. Besides, this plugin has smooth integration with the WordPress Customizer so you can preview google fonts on your site in real-time. You’ll be able to customize the color of each header to make them stand out. Choose a font family that you like and experiment with different versions of it.

WP Google Fonts

The second option is WP Google Font plugin that makes it easier to use Google’s free service to add high-quality fonts to your WordPress website. This plugin not only adds the necessary Google code but also allows you to assign Google fonts to specific CSS elements of your website from within the WordPress admin. It’s an excellent way to spruce up your site without requiring extensive development or coding knowledge.

Use Any Font

Lying in third place in the list of WordPress font plugins is Use Any Font. Use Any Font allows you to use any font that is in the correct format. You can literally grab any font you find on the internet and add it to your site. Because the plugin is integrated with the editor, you can highlight any section and change the fonts right there.

#Method 3: Add Custom Fonts

In case both of the 2 methods above do not meet your requirements, you can use the third solution: add custom fonts. To add custom fonts for your WordPress site, you should insert custom codes. This solution requires you to have some coding knowledge.

In this example, I am choosing the Oswald Google Font. To add this font to WordPress site, follow the steps below:

Step 1: Click the font in question and select the styles you want to embed:

Here, I am choosing the font named Regular 400, the link will be the following (including the single quotes):

https://fonts.googleapis.com/css2?family=**Oswald:wght@200;400**&display=swap

Step 2: Open your theme functions.php file, then copy and paste the following code into it. In such a case, you should use a child theme to prevent the main theme from unexpected errors. If you wish to add another font type, just replace the font’s link in the code.

function add_my_font() {
wp_enqueue_style( 'add_my_font', '<https://fonts.googleapis.com/css2?family=**Oswald:wght@200;400**&display=swap>', false );
}
add_action( 'wp_enqueue_scripts', 'add_my_font' );

To access the theme functions.php file, from your dashboard, go to Appearance > Theme Editor. Then, navigate to the functions.php tab, and paste the code above at the end of the file.

Finally, hit the Update File button to save your changes.

Step 3: Set the places where your fonts are going to be used.

The simplest way is to open your theme’s style.css file in your child theme’s folder, then add the following code:

.body, .h1, .h2, .h3, .h4 { 
font-family: 'Oswald', sans-serif;	 	 
 }

Remember to Update File

Now, let’s see how it really works. All texts in the body, h1, h2, h3, h4 will be set in the font you select before.

You can change the sections where you want to use the font by adding or removing the desired sections in the Style.css file.

In case, your WordPress theme may not accept these declarations, you should contact the developer of your theme for assistance, or choose a simpler method for changing a font in WordPress.

Conclusion

Typography plays a vital role in web design and affects user experience. Hopefully, after reading this article, you have got the most suitable way to change fonts in your WordPress site. If you’re already using a flexible theme, such as Woostify, you can use the built-in typography options of the theme. If your theme doesn’t, you can add custom fonts on the Internet or find fonts from an image and add them to your site by installing a third-party plugin or adding custom code.