fbpx

How To Change Font In WordPress Blog (In Just 5 Minute )

According to W3 Tech report more than 60% of the digital marketing content shares are hosted on WordPress and it is obvious that everyone is using different UX or content styles to grab readers’ engagement.

If we focus on Seo or search engine ranking for any website, the prime factor is bounce rate means for how long users will stay on your page. It all depends on the quality of content and the design of the attractive fonts used in the content.

How to change font in WordPress blog? and change in the font size or font family can be done using the default WordPress editor font setting and can be done using the WordPress plugin Advance editor tool with different font types or update the Additional CSS of the theme for a quick change in font size.

While you install WordPress or Blogger the first time, there won’t be many options to choose from available fonts.

This creates a problem for your content to design in a proper hierarchy, such as Header 1 and Header 2 and corresponding subheadings in specified font size and font family.

With the recent update in SEO Google has publically announced the passage indexing feature which will focus on what structure or format you used as a subheading within the content.

Having subheadings with different font size help reader to crawl your page effectively and ultimately more engagement.

Must Read: How to change Homepage in WordPress

This guide is to introduce, how to change Font in WordPress? Which Font size you should choose for a better user experience.


3 Quick Ways On How to Change Font in WordPress

Change in font size or font family in WordPress can be done using three different ways and not a much difficult job and will help you change in both Gutenberg and classic type editors.

First will focus on the Gutenberg Editor which is some kind of classic block.

Change font for Classical Blocks of Gutenberg Editor

As of WordPress 5.0 release in December 2018, WordPress has a default content editor which they call Gutenberg editor.

Gutenberg is also known as WordPress editor or Block editor, this new block editor is introduced with a completely new form of Blocks.

Where in the editor you would have to write the content within the blocks and the font size for each block will define separately.

If a user needs then for each block he can set different font sizes.

How To Change Font In WordPress GutenBerg Editor

 

The above screenshot Shows, how the block editor looks like, there is everything that will be written in Blocks only.

For a change in font size in Gutenberg editor follow the below steps.

  1. Open specific posts or pages in editor mode.
  2. Now select any specific block for which you need to change the font size.
  3. Click to the + Icon displayed on top of the block which expands and shows the type of block.
  4. Select the paragraph or Heading, the selection will make that block for the same purpose.
  5. On the right-hand side select the Block option.
  6. Inside the Block under the page setting click on the font size drop-down list.
  7. Select the font size options and the size of the font will be changed for that specific block.

How To Change Font In WordPress Gutenberg Font Size Editor

 

Gutenberg editor offers only the selection of the font size but not any different font family hence you are allowed to choose the font size in between

  1. Normal
  2. Medium
  3. Large
  4. Huge

Font Size in wordpress Editor

Remember ideally for paragraphs type blocks you can go with medium or normal text size and if your block is heading or subheading then choose in between large or medium or huge font size.

After selecting any one of the font sizes, you can also set the size of the fonts in an edit box beside font size to a specific size number there I use 18 for the headings and for content body mostly 14.

Similar way, you can make any block as the header such as H1, H2, H3, etc. for that select Header in the available option.

Title in Block editor

Font Size of the header is already specified, you won’t allow changing according to your need.

Well now you got an idea how to change the font size in a Gutenberg editor but I won’t use Gutenberg editor as I  am looking for an editor like WordPress.

So if you also using a different editor then the ideal recommendation is to use a plugin called Advance editor tool (TinyMCE Advanced).


Change font size using the WordPress Plugin

The advance editor tool is a WordPress plugin used to change the default Gutenberg editor to a classic editor like WordPress doc.

Advance editor not only offers bet options to choose the font size but also help to select the various font families. It is a plugin introduced in WordPress to make a better user experience.

Now let discuss how to install and edit the font size and font family in WordPress editor

  1. Go to the WordPress admin dashboard and navigate Plugins>>Add new.
  2. Search Advanced editor tool then install and activate the plugin.
  3. Now visit Plugins>>Installed plugin>> search for the same plugin and click setting.Advanced editor tool tiny mce advance wordpress editor

 

You will be redirected to a dashboard to setup options. There will be two settings available.

  • Block Editor(Gutenberg)
  • Classic Editor(TinyMCE)

As part of this plugin setup, go to classic Editor (TinyMCE) which will display a list of options available.

How To Change Font In WordPress TinyMCE Editor Setting

As you select the classic editor there select the which will display all the options which you can pick from the bottom available unused options.

Simply go to Unused buttons and pick the button such as font family, font size, bold, italic, and drop them to the topmost toolbar menu editor.

What it Advance editor plugin offer for font size and font family?

  • This editor will have a list of font-family what classical editor should have.
  • It has font size selection in the 8 to 36 points range
  • You would have an all list of font-family such as Aerial Black, Georgia, Impact, etc.

 

Once you are done with the complete menu bar setup simply scroll down and select a check box before “Replace the block editor with the classic editor” then after simply click save changes.

Now if you will visit your WordPress editor then all classical blocks will be replaced by a plain editor and you can make any line as your heading, or normal paragraph.

The below screenshot shows what, how after the selection of various options your editor will look like.

TinyMCE Advnaced Editor

Isn’t it amazing?

Now follow the below steps to change the font size and font family both in the WordPress editor.

  1. Open your post or pages in editor mode.
  2. To change in font size select the test you have written and navigate to the top of the menu bar and set the size.
  3. To change in font-family difference for paragraphs set the default family using the same font family dropdown.
  4. To change the font style of headings or subheadings select the same and choose from the font family dropdown.

This standard look of the editor makes your writing experience better.

In addition to fonts, you will also have options to chose from the media list, the addition of a contact form with that all alignments.

If possible start your blogging journey using this editor only that will make your writing experience far better than Gutenberg editor.

I am sure till this point you got the answers on how to change the font size but there is one other way is using the CSS code to change the complete size font size and which is not much difficult.

So let discuss the same.


Change overall Font Size using CSS

The changes we made using the editor window will apply to specific posts or pages font size but what if you want to standardized the default size of the paragraphs or headings?

Be cautious that this change is specific to the theme you will be using for the site and if in the future you will change the theme then the font size shifts back to the default.

This change will be brought by updating the custom CSS of the WordPress theme.

To change the font size using the CSS of the theme follow the below steps.

  1. Log in to WordPress editor.
  2. Navigate to Appearance>>Customize option.
  3. In the theme, customizer window scroll down and select CSS or advance CSS option.
  4. Now copy-paste the below code and click to publish button.

Well, this is just for the change of font size only not for the font family, to update this add below custom CSS to the theme.

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

By Updating this in theme CSS  font size of only paragraphs with the complete website will change automatically.

But if willing to change the font size for the headings then use the below code but replace h2 with h3, h4, h5 whatever heading or subheading font size you are expecting to change.

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

Well change in font size using the CSS is not much recommended because if you have the option to change using the plugin or within theme typography options then use of dedicated CSS is not recommended.

I am sure this guide has added some value to your learning.


Wrap up on How to Change font on WordPress Blog

Expressing your though by writing is an art and that not only your written text but their appearance also create a huge difference.

Change in the Font size or font family with a classic Gutenberg block editor is not that much efficient, hence the best way to do so is by adding the additional plugin.

The free advanced editor WordPress plugin is the most used plugin in WordPress and that will give a classic editor experience close to the Microsoft word document editor.

As an advanced editor, there are a couple of more WordPress plugins that can improve your blogging experience so I highly recommend you checking the same.

Well I am expecting you to share your favourite plugin in the comment box.

How To Change Font In WordPress Blog (In Just 5 Minute )

I am an Engineer and a passionate Blogger, who loves to share tips on Blogging, SEO, Google Ranking, Digital marketing, passive income, Cryptocurrency and Blockchain technology. Read More

Leave a Comment

0 Shares
Copy link