Back To Top

How to Change Font Size in WordPress

how to change font size in wordpress

How to Change Font Size in WordPress

Are you looking for how to change font size in WordPress posts or pages? You’ve landed at the right place.

Sometimes you may-want to make a line or a paragraph larger, or you might want to increase the font size on the entire page.

This article will easily show you how to change font size in WordPress posts and themes.

1: Using Paragraph Headings

Using headings in your content is a great-way to grab user attention with a larger size font. In most WordPress-themes, headings are in a larger-font than regular body-text. They enable you to break your posts and pages into-sections.

Headings are great for SEO as-well. Search-engines give proper headings more weight than normal-paragraph text.

Add a heading in the default-WordPress block editor.

You can add a heading to your-posts or pages by simply-adding the ‘Heading’ block. You can search for-it or find it in the ‘Text’ section in the WordPress-block editor.

add-a-heading-block-2

The block will-default to Heading 2. Normally, it makes sense to stick-with Heading 2 for your subheadings. If you want-to changes this, click on the ‘H2’ dropdown to select a different size.

change-heading-from-h2

Rather, you can change this in the block-settings on the screen’s right-hand side. You can change the heading’s color as well.

Add a heading in the older Classic-Editor.

If you are still using the older-classic editor in WordPress, you can add-headings using the ‘Paragraph’ dropdown.

Just highlight the text you want to turn into a heading, click the ‘Paragraph’ drop down, and select your heading-size.

choose-heading-in-classic-editor

The colors and sizes of the different Heading styles are controlled by your theme’s-stylesheet (style.css).

If you’re using a premium WordPress-theme, you may have the option to change these-settings under Appearance » Customize.

2: Changing the Size of Text in the Block-Editor

Suppose you want to have a paragraph or your whole post in a larger font. You can-do this easily by using the default WordPress-block editor.

Click on any paragraph-block, then select the font-size under ‘Typography’ on the right-hand side.

typography-settings

You can select from the dropdown, which covers Normal, Medium, Small, Large, and Huge. If you change your mind, click the ‘Reset’ button to set your paragraph back to the default-text.

There is also a ‘Custom’ option where you can simply-type in the pixel-size that you’d like. You can also set a large Drop-Cap to appear at the start-of your paragraph.

These options are not available in the older classic-editor for WordPress. If you want to use-them, then think about making the switch. This article will help you.

If you are determined to-stick with the classic-editor, then this next option is for you.

3: Change Font Size Using Advanced-Editor-Tools.

Advanced-Editor-Tools, also known as TinyMCE-Advanced, is a WordPress plugin that gives you more control over font-sizes and, text-formatting, and a range of other features.

This is especially useful with the older classic-editor, but it also works with the block-editor. It adds a new-block called “Classic Paragraph” with all the formatting-controls.

To use it, you’ll first need to-install and activate the Advanced Editor-Tools plugin.

RELATED BLOGS: READ MORE

Next, go to Settings » Advanced-Editor-Tool (TinyMCE Advanced) to configure the editor-settings. This is where you can set-up the buttons you want to use in the TinyMCE Advanced-toolbar.

If you’re using it with the Classic-editor, you should see that TinyMCE has the ‘Font-Size’ dropdown enabled by default in the second-row of icons.

You can move it to the first-row by dragging it upwards.

advanced-editor-tools-classic-editor-font-size-1

If you’re using the block-editor, you’ll need to scroll-down the screen and add the Font-Sizes dropdown to the toolbar by dropping and dragging it.

add-font-size-to-toolbar

Now click on ‘Save Changes’ at the-bottom of the screen.

To see the-button in action, create a new-post or edit an existing one.

In the block-editor, you’ll now have the option to-add a ‘Classic Paragraph’ block. It will have the Advanced-controls, like this:

advanced-editor-tools-classic-editor-font-size

In the classic-editor, you’ll see the toolbars with a font-size dropdown:

change-font-in-classic-editor

You can select any font-size from the dropdown.

Note: this does not give you as many options as the WordPress block-editor, and you can not type in your font-size.

4: Change Site-Wide Font-Size Using CSS

If you change font-sizes every time you edit a post, you may want to make it easier by-changing it permanently-in your theme.

You can change the default paragraph-size across your whole site. The best-way to do this is by using the Theme-Customizer under Appearance » Customize.

Some WordPress-themes may come with an-option for you to change the font-size. If you can find this option, you can use it without writing-CSS-code.

However, if your theme doesn’t have that feature, you can add custom CSS to your font size rules.

Click on the ‘Additional-CSS’ option in the theme-customizer. Here you can store all your custom-CSS-code.

add-additional-css

Now under the additional CSS text-box, add your CSS-code. In this instance, we are changing the font-size to ’16px’, and you can choose a different font-size.

  1. p {
  2. font-size:16px;
  3. }

You’ll see the changes on the preview-on the right hand side of the screen. If you are happy with the font-size, click the ‘Publish’ button on your screen to make it live.

Note: Your custom-CSS will only be applied to your theme. If you later choose-to switch to a different-WordPress theme, you will need to copy and paste-it into the Customizer again.

The above code only applies to paragraph-text. What if you wanted to change the font-size of all h2 subheadings?

Modify the above code to target the h2-element in your-theme like this:

  1. h2 {
  2. font-size:32px;
  3. }

You can do the same-thing with other headings as-well by changing h2 to h3, h4, or h5.

Hope this article helps you learn how to change font size in wordpress. For more information, contact us or call us at +(92) 301 0599631

HOW TO CHANGE FONT SIZE IN WORDPRESS | DON’T FORGET TO READ OUR LATEST BLOG POST | READ MORE

Post a Comment