How to Change Fonts, Font-color, and Font-size in WordPress [UPDATE 2021]

Changing fonts in WordPress

Four fonts walk into a bar. The barman says ”Oi – get out! We don’t want your type in here’.

I just love chasing fonts.  I like to collect them, thinking that one day I’ll use them in a presentation or on a site. But I have an eternal dilemma: I have no idea how to pair them. But one thing is for sure: Arial and Times New Roman are definitely not my type.

Have you discovered your type?

Colors, another heartache. I also like to browse through different color palettes and combos here and here  But, when I wanna pick a color combo for a site or a presentation, I’m always stuck in the paradox of choice…

Now, you’re probably reading this because you’re kinda stuck as well. And you’re not satisfied with your current WordPress theme fonts and color. This means we both need a helping hand. So, I made some digging, and I’m going to show you how to change them in WordPress. But more than that, I’m going to guide you into making a better color and font choice.

Deal?

I’ll start with the technical part, then go into how to pair fonts and choose colors.

Let’s get going.

How to change global fonts,  font sizes, and font color in the WordPress theme Customizer

Global fonts affect the whole website. So, any change that you make here will affect all fonts on your website. This is making your work a lot easier. Instead of moving back and forth between pages and changing the fonts of the main header, for example, you can make this change in bulk, via global typography settings.

Before we proceed, I want to make it clear that font size refers to the height of a font.

Now, let’s go to the theme Customizer. Now, the global font settings differ slightly from theme to theme. In my example, I am using the Colibri theme together with the Colibri page builder. Here are the steps:

  1. Enter the WordPress Admin Dashboard,
  2. Hover over “Appearance”,
  3. Select “Customize”,
  4. Go to “General Settings”,
  5. Select “Typography”.

Global typography settings in WordPress

 

In this section, you can:

  • setup headings. There are 6 types of headings in web design. H1 is the most important, H6 is the least important one. At this level, you can change their default size, weight (or thickness), font-family, and color. The moment you change the color of your H2s for example, all the H2 headers from your site will change color the moment you publish the change.

Changing text fonts, size and color under Typography Settings in WordPress

  • setup body text. All the text that is not a header or a link, is considered body text. Same as above, you can play with font-families, weight, and color.
  • customize the text that has links. You can change its color or decoration (eg: underline) if you want when the links are hovered or clicked/visited.

Making changes to links in WordPress

  • for headings, body text, and link text, you also have some advanced settings that allow you to decide on the spacing between letters, on the height of the line of text.

There are more than 200 available fonts in the Colibri theme…Plenty enough, don’t you think?

Now, it’s important not to mix too many fonts, and be consistent in their usage. But we’ll be covering some best case practices later on.

Another important thing is the way font size is calculated. You’ve probably noticed by now these:

types of font sizes

Font sizes can be calculated in pixels (“px”), “rem”, or “em”.

“Pixel(px)” is a static value, that is telling the browsers to render the letters at exactly the number of pixels in height that you specified.

“Em” and “rem” values are scalable or relative values. In the end, both “em” and “rem” values will be translated by the browser into pixel values. While a browser will always recognize 10 pixels as being 10 pixels, “rem” and “em” dimensions can vary.

When using “em” units, the pixel value you end up with is a multiplication of the font size on the element being styled.

“Rem” font measurement represents the font-size of the root element or the default font-size value of the  <HTML>.  Most of the times, this default size is 16px. What does this mean? The moment you assign 2 “rem” for H1s, this means they will be twice as tall as the default. Now, another important thing is that the root <HTML> element inherits its font size from the settings in the browser. 

I hope I didn’t make a mess in your head right now. To simplify things a little bit,  you don’t even need to know any default sizes. You can play with “em” or “rem” measurements until you reach your desired size. And next, you can balance accordingly the other heading and paragraph sizes. These measurements are preferred to pixels because they bring consistency to design and because they are responsive. They won’t be needing any additional styling on various devices.

Now, let’s go back a bit to font colors. As I’ve already mentioned, inside “Typography”, you can make color changes to headings, text, and links.

changing global font colors

You can pick a custom color, or introduce your own color code (via HEX or RGB).

Also, the current theme has a global color scheme.  You can add more colors to it or switch to another color scheme entirely. Just go to “More schemes” to see your options.

changing the fonts global color scheme in WordPress

Now, let’s say you made all the global typography settings. You decided on the font family, the font-size, the types of headings that you’ll use, and their colors. What now? How can you assign text to be an H1 or a paragraph?

We’ll talk about this in the next chapter.

 

How to make local font changes in WordPress (inside pages and/or posts)

Setting some parts of the text as “paragraphs”, “titles H1”, “titles H2”, etc. can sometimes be enough for differentiating between texts of various importance.
The option is available for both posts and pages.

Making changes in the theme Customizer

When inside the WordPress theme Customizer, go ahead and select a text section on the website preview. Remember, we’re still using the Colibri page builder. This might differ a bit inside other page builders.

In my example, I’m selecting the main title.

Making changes to a heading

On the left, I’ll see the menu options for “heading” editing. I can now switch from H1 to another type of heading.

If I want to add a piece of text, that is not a heading, I can go to the customizer and add the “text” component. There will be an editing option in the website preview as well, that will allow font-size, font-color, weight, and font-family changes.

 

Also, from the menu on the left, you can make extra changes, that can override the defaults in the global typography.

Text typography changes in WordPress customizer

In here you can:

  • change font color,change text color scheme in WordPress
  • change text shadow,
  • change font-size,
  • change font-family,
  • make advanced styling changes to your text in the normal versus the hover state,

Advanced font styling options in WordPress

  • set up a background for your text,
  • adjust spacing and borders,
  • apply effects (fading, sliding, zooming, etc.),
  • decide whether the text should show up on mobile devices as well (under the “Responsive” option).

If you want to add a new heading, you need to follow the same flow: add the “heading” component, then you can make the same edits as above.

 

Making font changes in the WordPress Default Editor (Gutenberg)

Now, let’s make some font changes to the text inside a blog post using the WordPress Default Editor. Here are the steps:

  1. From the WordPress Dashboard, select “All Posts”,
  2. Hover above a post title,Selecting a WordPress post
  3. Select “Edit”,
  4. Hover over a piece of text,
  5. From the toolbar that shows up, you can change text alignment, thickness, and also assign text types: from paragraph to H6.Text editing options in the Guternberg Editor
  6. From the menu on the right, you can make changes to the font-color. You can pick a color from the suggested ones, or assign a custom color.   changing text color in the default WordPress editor
  7. Don’t forget to hit “Update” and “Publish” when you’re done.

 

Making font changes in the WordPress Classic Editor

The first steps are as in the previous chapter:

  1. From the WordPress Dashboard, select “All Posts”,
  2. Hover above a post title,
  3. Select “Edit”,
  4. Hover over a piece of text,
  5. From the toolbar that shows up, you can change text alignment, thickness, and also assign text types: from paragraph to H6. You can also create ordered and unordered lists (meaning with numbers or bullets).
  6. Making font changes in the Classic WordPress EditorUpdate and publish your changes.

Pretty straightforward.

Change with CSS modifications

Now, let’s say you want to override your global typography on a particular page you’re editing.

This method requires some CSS. You can alter a website’s CSS in 2 ways:

  • In the style.css file of the WordPress Editor (Appearance -> Editor) – not really recommended.
  • Or in the additional CSS section of your theme Customizer.

You can affect specific ids, classes, or any other element. But if you’re a CSS aficionado, you definitely know the drill.

 

Making typography changes using WordPress plugins

In the extreme case when your theme’s Customizer does not allow you to do many typography or text-color changes, what else can you do? Use WordPress plugins.

Now, let’s say you want to upload your own custom fonts, in any format. I have one plugin recommendation for you: Use Any Font.

It has 200.000+ active installs. It supports all major browsers including IE, Edge, Firefox, Chrome, Safari, IOS, Andriod, Opera, etc.

Another plugin that I love is Font Awesome. This plugin spices things a little bit by giving you the chance to use icons as well. These icons behave just like text. You can change their size, their color.  How cool is that? Font Awesome is a great text library that is being used by thousands of web designers worldwide, inside or outside WordPress.

 

Why and when should you change font and font size in WordPress? Best case practices.

Here is a tiny checklist that you should have in mind when changing your fonts:

  • Use line-height wisely (the vertical space between two lines of text). Improper line-height can have a negative impact on the readability of your website’s text. Line height can also improve the design and give a certain rhythm to the typography. More not the topic here.
  • You should consider kerning, that is space between the letters in a text. The adequate letter spacing will result in more visually-appealing texts and improved readability.
  • Font size affects conversions. Although there’s no ideal font for boosting conversion rates, you should test some font variants. Numara Software changed font size from Arial 10pt to Arial 13 pt, which resulted in a 133% increase in conversion rate.
  • Fonts carry psychological implications. Kang and Choi turned to condensed typefaces, which increased web pages performance by 27%.
  • Concerning font weights, it has been found that medium fonts are most readable.
  • Be cautious with your font pairing, here’s a guide on how to nail this topic.
  • To see what fonts are mostly used, check this study on font usage distribution.
  • Another important aspect is to search for fonts with the best loading times. Check this study to see top 10 fonts and their page load times.
  • Understand how colors work together and the psychology around them in web design.

Let’s get to work and change font sizes

We hope these methods will help you change fonts in WordPress, customize font color and font sizes to the best. Choose the one you find the most useful, and which is also accessible to you.
Try different fonts and different font dimensions, but make sure typography observes consistency principles across the website.

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

 

[sibwp_form id=1]

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE