parallax background

How to Change Fonts in WordPress: Easy to Follow Guide

Looking for A Church Website Builder? These Are Your Best Options
May 13, 2019
The Best Web Design Books You Should Buy
May 15, 2019
 

Typefaces, also known as font styles,enable you to add a personal touch to how your messages are transmitted. Even though it might not seem so important at first, typography is an essential aspect of web design, strongly influencing the perception of users. Choosing and changing fonts is not that easy, and it might raise some problems for website owners. However, if you want to learn how to change fonts in WordPress and how to make a good selection of typefaces, this guide will answer most of your questions.

Why is your font choice relevant?

 

Many people believe that typefaces don’t make much of a difference when it comes to delivering a message. As long as it is readable, why should you bother with changing fonts? In fact, fonts carry much greater meaning than you would believe. Each font comes with a certain level of readability and its own unique connotations, so you must make sure your chosen font has features that make it appropriate for the theme of your website or the message you want to convey.

Fonts can also help you to guide visitors to read the content in a certain order. The viewer’s eyes always follow a path that the website’s layout dictates, based on visual elements. Arranging the text in a certain way and using specific fonts can change the way a visitor perceives the entire composition.In short, fonts represent a significant aspect of a website’s design, making the difference between a trustworthy one and a less professional one. This is why you should focus on learning how to change fonts in WordPress.

What types of WordPress fonts can you use?

 

Fonts come in five main types, and WordPress fonts are no exception. The typefaces you can choose from are:

  • Sans Geometric. Geometric fonts don’t feature a lot of elements. They are minimalistic and mostly made of geometric shapes. The strokes always have the same width. Two of the most popular examples of Sans Geometric fonts are Helvetica and Gotham.
  • Sans Humanist. These fonts are just as simple and structured as Sans Geometric ones. Even so, they have curlier details that resemble handwriting. Compared to geometric fonts, the strokes in humanist fonts vary in width. Common examples of humanist fonts include Verdana or Myriad.
  • Old Style. If you are familiar with those typefaces that were common in medieval times, you already know how old style fonts look like. They have consistent kerning and zero variation between lines. A good example would be Garamond.
  • Transitional.Step away from old style fonts and focus on transitional ones. Also known as modern fonts, transitional fonts were born soon after people got tired of old style fonts. These are sharper, more geometrical and their most differentiating feature is that both thick and thin strokes are used. Times New Roman or Baskerville are transitional fonts.
  • Serif Slab. Slab fonts are a combination of all the types mentioned here. They are based on different strokes, but they are quite bulky in structure. Archer is a great example of this category.

How can you change them?

Now that you know some things about different font types, it’s time to learn how to change fonts in WordPress. Most fonts on a WordPress site are the ones that your theme provider set beforehand. Luckily, each theme that is compatible with the latest WordPress versions has a feature called the Customizer. By using this option, you can customize certain settings of the theme, including fonts.

Here, you can decide how parts of your content are presented. The Customizer allows you to set the size of the text for paragraphs, titles (H1), subtitles (H2), and so on. In some situations, simply changing the dimension of the text will do the job. In other cases, changing the typeface is the only way to make the text stand out.

The editor will help you with changing structural details for all themes, but only certain WordPress themes offer highly customizable font options that let you change the font type anywhere on your site. If you aren't using such a theme, there are options other than the Customizer for changing your fonts, which we'll cover below.

Using a plugin for WordPress fonts

If you’re not that good with technology and you don’t want to dive into the world of coding just to change fonts in WordPress, you will definitely want to use a plugin. There are plenty of WordPress fonts plugins that will do the job for you. You can adjust the settings and change font styles entirely, with just a few clicks. Take a look at this list and choose the WordPress font plugin that works best for your needs.

Easy Google Fonts

easy-google
 

This is one of the simplest WordPress fonts plugins you can use. All the fonts included in this plugin are free. You can choose between more than 650 fonts, very diverse in style. You can change the typeface and alter settings such as the dimension of the paragraph and heading text. You can change the color attribute as well.

WordPress Font Plugin

google-fonts_WP
 

This WordPress Font Plugin will make your job easier. After installing it to your WordPress site, you can rest assured that your font settings stick around even when you are changing the theme. You can change both the style of the font and make adjustments regarding size or color. By using WordPress Font Plugin, you can change fonts for all aspects of your site, not only for content.

Use Any Font

useanyfont
 

Use Any Font is a simple WordPress fonts plugin that enables you to use custom fonts besides the ones that are already included in it. You can upload a font of your choice and the plugin turns it into a web-friendly typeface.

WP Google Fonts

WP_Googlefonts
 

If you're in love with Google's free collection of fonts, WP Google Fonts is the plugin for you. It directly changes the code without needing your intervention, and you can also assign fonts to specific elements of the site, instead of applying the changes to all the content present on it.

TinyMCE advanced

tiny
 

This plugin acts as an extension to your Gutenberg editor. A toolbar with all the settings you would need to change in a font will be added to the editor. Then, you can make whatever changes you consider relevant while writing your content.

MW Font Changer

mw=font
 

MW Font Changer is a good choice if you need to use fonts for Persian Arabic or Latin languages. The plugin offers character-friendly fonts for over 30 languages.

Using CSS code

If you are experienced with coding, you can use CSS instead of a plugin. Remember to save a copy of the theme’s files before starting to make changes so that you are able to revert to a previous version if anything goes wrong.

Here’s how to change fonts in WordPress by using CSS code:

  • Navigate to the style.css file in your WordPress Editor or the CSS section of your theme Customizer
  • Use the following code with the recommended font dimensions based on what you are planning to change:

For the whole text:

body {
font-size: 1.25rem;
}

For paragraphs:

p {
font-size: 20px;
}

For headings:

h2, h3, h4 {
font-size: 1.5em;
}

For sidebar elements:

.sidebar li {
font-size: 16px;
}

For footer elements:

.footer {
font-size: 110%;
}

You can change the fonts:

For the entire website

If you want to change the font globally for all content published on your website, you will have to navigate to the ThemeEditor under Appearance and then locate the theme’s style sheet. The CSS style sheet needs to be edited by adding this line of code at the top:

* {font-family:”Name of font”;}

For specific bits of the text

To edit just parts of the text published on your website or specific areas of your theme, you will have to find a specific tag, class, or div of your site. Each theme is different, so these CSS category names will be different for every user. Generally, after finding the category element, you will add some lines of code similar to:

body {font-family: Verdana, Arial, Helvetica, Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0; }

The most common CSS categories are post, entry, and post-entry.

Conclusion

Once you’ve learned how to change fonts in WordPress, it’s important to figure out which fonts work best with your site and which have the biggest impact on the users. Don’t underestimate the power of a good font. Typefaces can stir different emotions based on what message is conveyed. Picking a font from a family of typefaces that are known for the audience that consumes it can dramatically change how your website is perceived. Do your research and see which website does its job the best.

Beginners should use WordPress fonts plugins, while experienced users can play with different CSS styles to achieve the personalized result they have in mind. Either way, focus on aspects that make a difference in how the typefaces look on the website – kerning, readability, spacing, size, colors and so on.

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 141,000+ customers.

Comments are closed.

Free cheat sheets available

Subscribe to download a set of cheat sheets for CSS, JS, and HTML

You'll receive an email with the cheat sheets in an instant.