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 essential when creating engaging content for your visitors. Your font size can go a long way to determine 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 very easy 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 that 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 (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 the . use 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, first of all, to download the TinyMCE advanced plugin, install and activate it. Then, go to your settings to use the classic editor only. However, you can leave them unticked if you wish to toggle between the editors. Below are steps to change font size in WordPress using the TinyMCE Advanced plugin. Create a new post or select an existing blog post you wish to edit. Use the method mentioned above. Step 1: Highlight the texts and choose your desired font size Step 2: Let’s say you choose 18 as your preferred font size; the result will be like this below: Step 3: Using 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 code. It is important that you have experience with CSS before using this method. CSS codes can be tricky and affect your website's appearance if not coded correctly. 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 file or Customizer.  We advise using the customizer since it is easier than using the . style.css 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 Appearance, then Customize or Additional CSS. You may only see “customize” for some themes after clicking 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 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, click Customize to take you to the image below. Step 2: In your CSS section, you can add the following lines of code depending on what exactly you wish to achieve. Add the following lines of code 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 your desired font size. You need to add the following lines of code if you wish to change the font size of all paragraph tags. p {
font-size: 20px;
} 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;
}
} While changing the font size from the style.css file is very technical. This method should only be used by only those with CSS skills. 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 to change font size in WordPress using three different methods easily. Hopefully, by now, you can do this on your own. However, if you are still facing any difficulty, you can always reach out to us through the comment section for a proper directive.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Three Easy Ways to Change Font Size in WordPress

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

These Simple Steps Are The Key to Helping Your Business Rank on Google

REM and EM in CSS Explained

0–100 in Django: Starting an app the right way

The Noonification: A Taxonomy of Inclusiveness (1/11/2024)

106 Stories To Learn About Website

10 Web Development Boosting Node.js Libraries and Frameworks

These Simple Steps Are The Key to Helping Your Business Rank on Google

REM and EM in CSS Explained

0–100 in Django: Starting an app the right way

The Noonification: A Taxonomy of Inclusiveness (1/11/2024)

106 Stories To Learn About Website

10 Web Development Boosting Node.js Libraries and Frameworks

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps