This user guide will help you to learn the easiest way to change font size in WordPress, you may also take designing tips from our article Divi Font List Guide . Changing the size and type of font will give your article a unique and customized touch. After learning how to change the font size, we will also go through ways to change the font type and give you tips to add headings and subheadings.
WordPress, being a Content Management System (CMS), facilitates its’ users in writing various styles of blogs with the aid of multiple font sizes and types. This platform is popular for its user-friendly post editing characteristics. You need to understand that the structure of the content is essential for visitors and for your WordPress Google Search ranking. A good heading structure can help search engines in scanning the main topics in the content and achieve a better ranking. While you are at it, you can also learn all about Taglines in WordPress from one of our articles.
If you are worried about having a low ranking because of a messed-up structure then you need to stop worrying and start reading this guide. This guide will help understand how to change the text type, font size, text color, and a lot more.
How to Change Font Size in WordPress
To start with, login into WordPress and click ‘Posts’ in the left sidebar, followed by ‘Add New’ in the sub-category.
Once you click on Add New, it will open a blank WordPress page. On this page, you can write your blog.
To simplify the process, let’s go through an example. First, we will write Easy Fixes to the most common WordPress issues in the text box and look at how we can change font size in WordPress and change font type and headings.
Change Text Type in WordPress
Search Engine Ranking Pages (SERPs) usually rank articles with headings and subheadings higher than text with no structure. So, we will first explore how to change the above-listed text into a heading. To do this, select the text, and click on the drop-down menu where ‘paragraph’ is written, and change text into H2. H2 is a popular subheading size for blogs in WordPress.
Alternatively, you can use the keyboard shortcuts mentioned in brackets. For example, here’s how the text looks if you select H2.
Now, click on the drop-down menu above the text box to change the heading into the text, and select ‘Paragraph.’ For now, we will keep the same heading and add text.
Change Font Size in WordPress
Most people struggle with changing text size in WordPress. There are 3 Ways to change font size:
- Ways to change Font Size by installing Plugins
- Editing HTML script in the WordPress
- Insert HTML code
Ways to change Font Size by installing Plugins
Advanced Editor Tools, previously known as TinyMCE Advanced a free Plugin you can install in WordPress to benefit from additional features, such as changing the font size. To install Plugin, Click on Plugins in the side toolbar.
Click on Add New.
An installed Plugin page with the option to search and add new plugins will appear. In the search bar, write ‘Advanced Editor Tools’ and install the Plugin.
Now, hover the pointer over settings in the side toolbar, and click on ‘Advanced Editor Tools (Tiny MCE Advanced).
Note that, in the case of Advanced Editor Tools, we have two options:
- Block Editor
- Classic Editor
We are currently working on Classic Editor, but we can add font size in the toggle toolbar for both of these.
In the case of Block Editor, you will have to scroll down a bit.
You will come across the heading’ Toolbars for the Classic Paragraph and Classic blocks.’
Now, Drag and drop ‘Font Size’ into the toggle toolbar and place it alongside the ‘Paragraph’ drop-down menu.
The same options are available in the Classic Editor. To save changes, scroll down and click on ‘Save changes’ at the end.
Click ‘All Posts’ in the side toolbar to see the applied changes and open your post. It will now look like this.
Observe the added feature of the Font Size drop-down menu in the toggle toolbar. You can select the text and change the font size. Note that font size options for paragraph text are different from ‘Headings.’ Here’s an example of changing font size in WordPress.
Editing HTML script in the WordPress
To edit the script in HTML, we will go to Plugins, and if ‘Classic Editor’ is deactivated, activate the classic editor. If you’ve already installed ‘Advanced Editor Tools,’ you will have to deactivate that Plugin. It may interfere with the workings of classic editors.
Now, open your post from all posts in the setting toolbar. We wrote ‘Troubleshooting Steps to fix the most common WordPress issues’ in the text box.
Now, we will go through ways to explore how to change the font size in WordPress. For this, click on the ‘Text,’ which is the HTML code area for WordPress.
This will open the HTML script for the WordPress blog you are writing.
The WordPress Classic Editor by default mode shows the color and text size for ‘Headings.’ This is proved in line 1, where the size and color of the H2 heading we previously selected are mentioned. To change, font size of the line in ‘Paragraph,’ select the following text and copy it.
Now, if you look closely, you can notice the line we wrote ‘Troubleshooting ways to fix the most common WordPress issues, in the 3rd line. P is code for ‘Paragraph’. To change font size, we will follow the pattern of the HTML script for the H2 heading.
Your next step is to paste it in front of the letter ‘p.’
Notice that now we have options of changing color and size for the paragraph text. To change font size, enter any number according to your feasibility. For example, the H2 heading was 18px, so ideally text should be smaller. Let’s go with the acceptable academic font size for assignments, which is usually 12px.
Click on the ‘Visual’ to see the applied changes. You can go back and forth between Visual and Text to continue to change the font size that’s most feasible for you.
Insert HTML code
Suppose you are not fond of adding or subtracting HTML script from one part of the text body to another (heading to paragraph) and think its’ too risky. Don’t worry. There is another easier way too.
At wpfirsthand, we’ve figured out HTML code for changing the font size.
Step 1: Copy the following text.
style=” font-size:18px;”>
Step 2: Paste it in the line coded for ‘paragraph,’ like this.
By default, the font size of the paragraph will appear to be similar to the heading. However, you can change the font size by changing the number written in the HTML style sheet before ‘Font size.’ To see the applied changes switch to the ‘visual mode.’
Change Font Color in WordPress
To change Font Color, select the icon titled “A” with a bold underline in the 2nd line of the toolbar.
When you click on the icon mentioned above, various color options will show.
For further customization, select any color. For example, we selected ‘blue’ and clicked ‘Custom’ to adjust the color gradient.
Hover the pointer over the big color box, and select any shade of blue or another color you’ve selected.
Another way to change Font Color, click on ‘Text’ to open HTML Script.
Click on Visual to see the applied changes.
Notice that the text is now in Blue instead of black. However, for ease of understanding how to change font size in WordPress, we will keep the paragraph text ‘black.’
Optional Additional Changes
Sometimes, you may want to emphasize certain parts of the text to attract readers’ attention. The best way to do this is to bold the text. For this, click on the word or part of the sentence you would like to bold and select ‘B’ on the right side of the drop-down menu option. For example, we selected part of the sentence’ most common WordPress issues.’
The above image shows that the selected text ‘Most common WordPress issues’ is now bold.
Sometimes, technical terminologies or related jargons are new for readers. So, to draw attention, we can ‘Italicize’ the term.
For ease of understanding, we’ve included a technical term in the sentence.
Troubleshooting ways to fix the most common WordPress issues using HTML code.
Select ‘HTML’ and click on the tilted I icon near the ‘Bold text’ option.
Here’s how it will look like.
Notice that now only the technical term ‘HTML’ is italicized.
You can reverse your decision for both bold and italic options by selecting the text and clicking on the ‘Bold’ and ‘Italic’ options.
