{"id":15328,"date":"2019-02-15T15:14:59","date_gmt":"2019-02-15T15:14:59","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=15328"},"modified":"2024-03-26T15:00:49","modified_gmt":"2024-03-26T15:00:49","slug":"how-to-change-font-size-in-wordpress","status":"publish","type":"post","link":"\/ph\/tutorials\/change-font-size-in-wordpress","title":{"rendered":"How to Change Font Size in WordPress"},"content":{"rendered":"

Changing the font size on WordPress is<\/a> easy. You’ll learn everything you need to know in this article. We’ll cover two methods – installing a plugin and using CSS.<\/p>

WordPress is known for its user-friendly post-editing. Just like your favorite word-processing software, it offers many options. You can edit content easily using a drop-down menu to set headings and paragraphs.<\/p>

Please note that the structure of your content is important for visitors and SEO. Having a good heading structure helps search engines scan the main topics of your posts, especially the long ones. This will help achieve a better ranking in the search engine results pages.<\/p>

The latest WordPress version comes with the Gutenberg editor. We’ll also show you how to change the font size with this tool.<\/p>

Changing the Font Size Using the TinyMCE Advanced Plugin<\/h2>

TinyMCE Advanced<\/a> is a free plugin that lets you choose your preferred font size easily. This plugin provides a classic editor toolbar on the new Gutenberg editor.<\/p>

First, you need to install and activate the plugin<\/a>. Then, you can go to the Settings<\/strong> page. You’ll find two tabs: Block Editor (Gutenberg)<\/strong> and Classic Editor (TinyMCE)<\/strong>.<\/p>

If you want to use the classic editor only, enable Replace the Block Editor with the Classic Editor<\/strong> under Advanced Settings<\/strong>. But leave it unticked to use both editors side by side.<\/p>

Here are the steps to change the font using this plugin:<\/p>

1. Create a new post or edit an existing one. You’ll see a classic paragraph editor.<\/p>

\"The<\/a><\/figure>

2. Highlight the lines of text you want to change, then choose the font size.<\/p>

\"Picking<\/a><\/figure>

3. The result will look like this:<\/p>

\"The<\/a><\/figure>

Using CSS – The Classic Way<\/h2>

While the above method is great for a beginner, the classic way requires CSS and might be a little bit more tricky.<\/p>

However, when using a plugin or the default WordPress editor, you need to do the change for every posts and page. Using CSS changes the font size for the whole site.<\/p>

Changing the font size using CSS requires adding lines of codes. You can do this via the editor or Customiser<\/strong>. But, we recommend the customizer as it is the easier method.<\/p>

1. Go to the WordPress dashboard, then to Appearance<\/strong> > Customise<\/strong>.<\/p>

\"WordPress<\/a><\/figure>

2. Choose Additional CSS<\/strong><\/a> on WordPress.<\/p>

\"WordPress<\/a><\/figure>

You can add lines of code on the left-hand side box.<\/p>

1. To change the entire font: body { font-size: 1.25rem; }<\/code><\/p>

\"WordPress<\/a><\/figure>

2. To change the paragraphs’ font: p { font-size: 25px; }<\/code><\/p>

\"WordPress<\/a><\/figure>

3. To change specific headings’ fonts: h2 { font-size: 2.5em; }<\/code><\/p>

\"WordPress<\/a><\/figure>

4. To modify sidebar font size: .sidebar li { font-size: 12px; }<\/code> <\/p>

5. To customize the footer font: .footer { font-size: 150%; }<\/code> <\/p>

6. To change specific screen sizes’ font: <\/p>

html { font-size: 18px; } @media (min-width: 900px) { html { font-size: 20px; } }<\/code> <\/p>

CSS stylings allow four different units to measure the size of the text:<\/p>