How to Change Font Size in WordPress

Font size can make or break your WordPress site. Text that’s too small is hard to read, while oversized headings can look unprofessional and push important content below the fold.

In this guide, you’ll learn exactly how to change font size in WordPress using the Block Editor (Gutenberg), the Classic Editor, your theme’s typography settings, and custom CSS. We’ll also look at how to keep your font sizes responsive so they look good on both desktop and mobile.

This tutorial focuses specifically on font size. If you also need to change the font family (typeface), you can follow our separate guide on how to change font in WordPress once you’re done here.

Prerequisites

Before you start changing font sizes, make sure you have a few basics in place.

• Administrator or Editor access to your WordPress dashboard.
• Your theme name and whether you’re using the Block Editor (Gutenberg) or the Classic Editor.
• A recent backup of your site or database, in case you need to roll back style changes.

Step 1: Identify How Your Theme Handles Font Size

WordPress sites can control font size in several places: directly inside individual posts or pages, in global theme settings, or with custom CSS. Your first job is to see what your theme already offers.

1. Log in to your WordPress dashboard (yourdomain.com/wp-admin).
2. Go to Appearance > Themes and note the active theme.
3. Check for typography settings:
   • If you see Appearance > Customize, open it and look for sections like Typography, Fonts, or Global Styles.
   • If you see Appearance > Editor (Site Editor), open it and look for the Styles panel, then Typography.

If your theme exposes font size controls here, that’s usually the best place to set global sizes for headings and body text. You’ll still be able to override sizes on individual blocks when needed.

Step 2: Change Font Size in the Block Editor (Gutenberg)

If you’re using the Block Editor, you can change font size for individual paragraphs, headings, and other text-based blocks directly in the editor.

1. From the dashboard, go to Posts > All Posts or Pages > All Pages and open the content you want to edit.
2. Click on a text block, such as a Paragraph or Heading block.
3. In the right-hand sidebar, open the Block tab and look for the Typography section.
4. Under Font size, choose a predefined value (e.g., Small, Medium, Large) or select Custom and enter a value in px, em, or rem.
5. Update or publish the post when you’re happy with the size.

For headings, use the H2, H3, etc. options in the toolbar first, then fine-tune the font size in the sidebar only if you need a special size.

Step 3: Change Font Size in the Classic Editor

If your site still uses the Classic Editor, font sizes are managed a bit differently. You mainly work with paragraph and heading formats, plus optional custom CSS.

1. Go to Posts > All Posts or Pages > All Pages and open the content you want to edit.
2. In the editor toolbar, click the Toolbar Toggle button (the icon with three dots and a line) if the second row of icons isn’t visible.
3. Use the Paragraph dropdown to choose Paragraph, Heading 2, Heading 3, etc. Each option has a different default font size defined by your theme.
4. Apply heading levels consistently: H2 for main sections, H3 for subsections, and so on.

If you need a very specific font size (e.g., 18px body text across the whole site), you’ll usually set that through the theme’s typography options or custom CSS instead of trying to force it in the Classic Editor.

Step 4: Change Global Font Size with the Customizer or Site Editor

Global font sizes let you change text size across your entire site for body text and headings with one setting. This is the best way to ensure consistent typography.

For themes using the Customizer

1. Go to Appearance > Customize.
2. Look for a section like Typography, General Settings, or Theme Options.
3. Find controls for Body font size and Heading font size (these labels vary by theme).
4. Adjust the sliders or input fields to your desired sizes (e.g., 16–18px for body text).
5. Use the live preview to check how the new sizes look on different pages.
6. Click Publish to save your changes.

For block themes using the Site Editor

1. Go to Appearance > Editor.
2. Click the Styles icon (often a half-filled circle).
3. Open Typography, then adjust settings for Text and Headings.
4. Preview how your changes affect templates like Single posts and the Homepage.
5. Click Save when you’re satisfied.

Step 5: Change Font Size with Custom CSS

If your theme doesn’t offer the controls you need, or you want very precise sizing, custom CSS gives you full control. This is more advanced but extremely powerful.

Where to add your CSS

• Recommended: Appearance > Customize > Additional CSS
• Advanced: In a child theme’s style.css file

Example: adjust body and heading sizes

Add the following CSS to your Additional CSS panel:

/* Global body text size */
body {
  font-size: 18px;
  line-height: 1.6;
}

/* Headings */
h1 { font-size: 2.4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }

Example: responsive font size for mobile

To slightly reduce font size on smaller screens:

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

After saving, reload your site in a new browser tab and verify that your text sizes look correct.

Step 6: Test Your New Font Sizes on Desktop and Mobile

Once you’ve changed font sizes, take a few minutes to test them. This helps you catch readability issues before visitors do.

1. Open a few key pages (homepage, long blog post, product page) on desktop.
2. Check headings, body text, menus, and buttons to make sure the sizes feel balanced.
3. Use your browser’s responsive preview or your actual phone to view the same pages on mobile.
4. Look for text that wraps awkwardly, breaks lines in buttons, or looks too large on small screens.
5. Adjust global or CSS sizes if necessary and retest.

Dialing In the Perfect Font Size for Your WordPress Site

Changing font size in WordPress isn’t just about making text bigger or smaller. It’s about creating a consistent, readable experience across your entire site.

By identifying how your theme handles typography, adjusting sizes in the Block or Classic Editor, setting global sizes in the Customizer or Site Editor, and using custom CSS when needed, you now have full control over how your content reads on any device.

Take a moment to review a few key pages after each change, and your typography will quickly go from “good enough” to polished and professional.

Further Reading

• How to Change Font Color in WordPress
• How to Design a Website with WordPress
• How to Design a WordPress Website

Frequently Asked Questions

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
}