How to change fonts, colors and size in WordPress

How to change fonts, colors and size in WordPress

If you’re at the stage of creating the raw version of the website, chances are that you’re not content with the default fonts and font dimensions for text. You’ll find guidance on how to change them in the following lines.

 

Why and when should you change font and font size in WordPress?

 

Font and font size changes should be made following web design principles. For that reason, we advise you to apply changes if it’s one of the following cases:

 

 

Good to know – what to consider for your perfect font in WordPress?

 

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.

You should pay attention to leading, that is space between the lines in a text. This is important for readability and design and gives a certain rhythm to the typography.

 

Let’s get to work and change font sizes

 

There are several methods for changing font sizes in WordPress. We’ll present each of these, from the simplest to the most difficult one.

Change fonts and font sizes in the Customizer

 

The simplest method to change fonts and their sizes is to adjust them from the theme Customizer. You

  • enter the WordPress Admin Dashboard,
  • where you hover over “Appearance”
  • and press “Customize”.

 

You should have settings for typography, in the left-hand menu.

For example, in Mesmerize theme, you’ll find options related to typography in General Settings.

 

 

Press on Typography and you’ll be directed to sections where you can customize fonts for the site text.

Section 1: manage web fonts in site (font size changes included)

 

 

In this section, there are some pre-defined fonts you can bring changes to.

You can:

  • remove unwanted fonts from site
  • add a web font from the Google Fonts library
  • edit fonts in the list

 

Concerning editing options:

If you click on Edit, you’ll open a popup with that font variants, both for the font size and for style:

 

 

The font size can be greater or smaller, depending on what value you choose from the right-hand sidebar.

 

Section 2: manage fonts & font sizes for default elements

 

These elements refer to items to which you apply general typography and items marked as headings (h1…h6).

Adjust font size and other options for General Typography

 

  • On the slider, try different values. On the right-side of the screen, you’ll see what the modifications look like;

 

  • For further customization, you can access the option related to color. You can adjust the text color from the color picker;

 

  • Last, but not least, you can choose the font family and a specific variant of it.

 

Adjust font size and other options for Headings

 

As headings play a major role in structuring text and putting an emphasis on what’s important in content, you have extended options for headings typography.

Extra options concern font dimensions and subtle modifications to its style.

 

  • There’s the classic option to adjust font size (defined by rem units);

 

  • There’s an additional option to set font dimensions as they display on mobile devices;

 

 

  • For advanced customization, there’s the option to set the line height (it defines the vertical distance a line of text is deployed over);

 

  • There’s another option for kerning (usually, you’ll find it named as “letter spacing”);

 

  • In addition to font size options, you’ll have the classic modifiers for color, font family and variant.

 

Change font sizes with titles and subtitles

 

Setting some parts of 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.

In the WordPress editor, the upper toolbar has an option related to text structuring. Use the drop-down menu and select what’s appropriate for your text: paragraph format, heading1 format, heading2 format, etc.

 

 

 

The headings and paragraphs have pre-defined fonts and font sizes. If you want to change pre-defined values and give a different look and dimension to paragraphs or headings, you can do so from the theme Customizer.

Please refer to the previous section for details about how to change typography of headings and paragraphs in the website.

 

Change fonts and font sizes with a WordPress plugin

 

The best plugin for changing font size in WordPress is TinyMCE Advanced. You’ll have to search for the plugin in the plugins’ directory (in the WordPress Admin dashboard), install and activate it.

If you need help with installing TinyMCE Advanced, check this guide on how to install plugins in WordPress.

After having installed this plugin, you need to open the WordPress editor for a post or a page, to be able to apply changes to font size.

 

 

You’ll see that the upper toolbar has extended functionalities, including font family selection and font size options.

Use the drop-down menu next to “Open Sans”, to select the font you want to apply to your text.

Use the drop-down menu next to “12 pt”, to select the font size you want to give to your text (or parts of your text).

Also, you’ll have the option to change text color, from the upper toolbar TinyMCE Advanced added to your WordPress editor.

 

See below how we made font changes with TinyMCE Advanced:

 

 

One note though! Carefully turn to TinyMCE Advanced for making font changes. In addition to font customizations, you’ll have to pay attention to general website consistency. There should be a coherence among text elements throughout the website pages and posts.

 

Change with CSS modifications

 

This method requires some coding knowledge. Precisely, you need to know CSS to edit the stylesheet files of the website.

 

You’ll need to put some of the following lined of code either:

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

 

The commands are the following:

  • For the entire text of the website

 

body {

font-size: 1.25rem;

}

  • For simple paragraphs in the website

 

p {

font-size: 20px;

}

 

  • For headings that structure the text in the website

 

h2, h3, h4 {

font-size: 1.5em;

}

 

  • For sidebar elements

 

.sidebar li {

font-size: 16px;

}

 

  • Footer items

 

.footer {

font-size: 110%;

}

 

How to change font color in WordPress

 

You can easily change the color of the text font, once you’ve found the color picker in WordPress.

You can change the font color:

  • From the Customizer (either in Default Elements Typography or in the preview mode)

 

 

 

 

  • From the toolbox of the WordPress editor, once the TinyMCE Advanced plugin is installed.

 

 

 

We hope these methods will help you customize fonts, 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.

 

Happy customizing!