Easy Ways to Change Font Size in WordPress – Flaword

Easy Ways to Change Font Size in WordPress – Flaword by Adesoji Michael

Are you trying to change the font size on your WordPress site? This may not be as difficult as it seems, as WordPress always has easy ways to go around stuff like this.

Styling and formatting WordPress posts and pages are important aspects of creating engaging content for your visitors.

Your font size can go a long way to determining how long visitors stay on your website. Most people may stop trying to read your post when the fonts are too small for their eyes or don’t fit properly on their various devices.

In this article, we will show you how to change font size in WordPress using three effortless methods.

How to Change Font Size in WordPress?

There are different methods you could use to change font size in WordPress. While some of the methods are more technical, others are simply straightforward.

We have chosen the best three methods you can use to change the font size of your WordPress website to suit your need.

They include making use of the Gutenberg editor, using an advanced Plugin, and using custom CSS.

Using the Gutenberg Editor

Gutenberg editor is a new addition to the latest WordPress version. It is integrated within the Content Management System (CMS) for easier media-rich post-editing.

One of the noticeable features of Gutenberg is the use of blocks. These blocks allow you to drag and drop any media file (such as images, audio, videos, etc.) in your pages or posts.

So, you can follow the steps below to change font sizes on your WordPress website using the Gutenberg editor:

Step 1: Either choose the post you wish to edit or just Add New blog post.

Step 2: Click on the block containing texts you want to change and add the size number manually (usually in “px”).

Step 3: You can set the size as Small, normal, media, large, and huge in case you do not want to use a custom font size.

With that, you can change your blog post font size in WordPress using the Gutenberg editor.

Mind you; not all WordPress themes come with the Gutenberg editor. You can use any editor specific to your theme.

Using an Advanced Font Plugin: Advanced Editor Tools (previously TinyMCE Advanced)

Another method you can use to change your WordPress blog post’s font size is an advanced font plugin. For this, we will use the TinyMCE Advanced.

With over 2 million downloads, TinyMCE is one of the best free plugins that let you change font size easily. You can use this as an alternative for Gutenberg editors.

You need to first of all download the TinyMCE advanced plugin, install and activate the it. Then, go to your settings to use the classic editor only. Although you can leave them unticked in case you wish to toggle between the two editors.

Below are steps you can use to change font size in WordPress using the TinyMCE Advanced plugin.

Step 1: Create a new post or select an existing blog post you wish to edit. Use the method mentioned above.

Step 2: Highlight the texts and choose your desired font size

Step 3: Let’s say you choose 18 as your preferred font size. The result will be like this below:

Using the Custom CSS

While the methods mentioned above are great for a beginner, a tech-savvy may use the CSS method. This method requires that you add a few lines of codes.

You must have experience with CSS before using this method. CSS codes can be tricky and can affect your website appearance if not coded in the right way.

The CSS method allows you to change the font size of the whole website rather than each blog post or page.

There are two ways you can use CSS to change the font size. You can achieve this either via the style.css file or customizer. We advise you to use the customizer since it is easier than the style.css.

You can easily follow the steps below to change font size using CSS following the steps below conveniently.

Step 1: On your WordPress dashboard, click on appearance, then Customize or Additional CSS.

For some themes, you may only see “customize” after clicking on the Appearance tab. While other themes allow you to see the Customize and Additional CSS options under the Appearance tab.

Either way, you can edit your CSS codes when you click on Additional CSS.

The image below shows the Customize and Additional CSS options under the Appearance tab.

However, if you can’t find “Additional CSS” under the Appearance tab, just click on Customize to take you to the image below.

Step 2: In your CSS section, you can add the following code lines depending on what you wish to achieve.

Add the following lines of codes if you wish to change the entire font size of your WordPress website.

body {
font-size: 1.5rem;
}

The “1.5rem” could be anything, depending on the font size you want.

You need to add the following lines of code if you wish only to change the font size of all paragraph tags.

p {
font-size: 20px;
}

While to change the font size of specific headings, add the codes below:

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

You can use the lines of codes above if you want the h2, h3, and h4 font sizes to be the same.

Footer font size CSS codes:

.footer {
font-size: 120%;
}

While to change the font size of specific screen sizes, you need to add the following CSS codes:

html {
font-size: 18px;
}
@media (min-width: 900px) {
html {
font-size: 20px;
}
}

Changing the font size from the style.css file is very technical. Only those with CSS skills should use this method.

You shouldn’t make changes directly to your installed theme’s files so that you don’t tamper with the appearance of your website.

Conclusion – How to change font size in WordPress

In this guide, we’ve shown you how you can easily change font size in WordPress using three different methods. Hopefully, by now, you should be able to do this on your own.

However, if you still face any difficulty, you can always reach out to us through the comment section for a proper directive.

1 thought on “Easy Ways to Change Font Size in WordPress – Flaword”

Leave a Comment

Your email address will not be published.