How to Change Font Size in WordPress: Gutenberg, Plugins, CSS, and Theme Customizer

Changing font size in WordPress means adjusting the typographic scale of your site's text elements — headings, body copy, captions, and navigation labels — either at the block level, theme level, or globally via CSS. The method you choose determines the scope of the change: a single paragraph, a content type across all pages, or every text element site-wide.

This guide covers every practical method available in a modern WordPress installation, including the Gutenberg block editor, typography plugins, the native Theme Customizer, and direct CSS overrides. Each approach has a distinct use case, and picking the wrong one creates technical debt that compounds over time.

Why Font Size Decisions Are More Technical Than They Appear

Typography is not a cosmetic concern. Font size directly affects Core Web Vitals scores, specifically the Cumulative Layout Shift (CLS) metric when fonts load asynchronously, and the Largest Contentful Paint (LCP) when large heading text is the primary viewport element. Poorly scoped font-size rules — for example, applying font-size to the body element without accounting for em-based inheritance — cascade unpredictably through child elements, breaking spacing, line-height ratios, and component layouts.

If you are running WordPress on a VPS Hosting environment with root access, you have the additional option of editing theme files directly and managing caching layers that affect how CSS changes propagate to end users. That level of control is unavailable on shared infrastructure, making the method selection even more important.

Comparison: All Four Methods at a Glance

Use this table as a decision matrix before touching any setting. The right method depends on scope, your technical comfort level, and whether you are working on a child theme.

Method 1: Gutenberg Block Editor

The Gutenberg block editor, introduced in WordPress 5.0, handles font size at the individual block level. This is the correct approach when you need to adjust the size of a specific paragraph, heading, or group of elements without touching global styles.

Step-by-Step: Adjusting Font Size in a Block

1. Log into your WordPress dashboard and open the post or page you want to edit.
2. Click on the text block you want to modify — typically a Paragraph, Heading, or List block.
3. In the right-hand sidebar, locate the Block tab (not the Document tab). If the sidebar is hidden, click the gear icon in the top-right toolbar to reveal it.
4. Scroll down to the Typography section within the block settings panel.
5. You will see preset size options: Small, Medium, Large, and Extra Large. These values are defined by your active theme's theme.json file.
6. To set a precise value, click the Custom option and enter a size in pixels (e.g., 18px) or use relative units like rem (e.g., 1.125rem).
7. Click Update or Publish to save.

Using theme.json to Define Custom Presets (WordPress 5.8+)

If you manage a block theme or a classic theme with a theme.json file, you can define the exact preset sizes that appear in the editor sidebar. This is the most maintainable approach for development environments.

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "14px" },
        { "name": "Regular", "slug": "regular", "size": "16px" },
        { "name": "Large", "slug": "large", "size": "22px" },
        { "name": "Extra Large", "slug": "x-large", "size": "32px" }
      ]
    }
  }
}

Placing this in your child theme's root directory ensures the presets persist across theme updates and are accessible to every editor on the site without requiring CSS knowledge.

Edge Case: Block-Level Font Size vs. Global Styles Conflict

A common pitfall occurs when a block has an explicit font size set via the editor, but the theme's global stylesheet also targets the same element with a higher CSS specificity rule. The block editor injects inline styles like style="font-size:22px", which typically overrides most stylesheet rules. However, if a theme uses !important declarations in its CSS, the inline style loses. Always inspect the rendered element in browser DevTools to confirm which rule is winning.

Method 2: Typography Plugins

Plugins are the right choice when you need site-wide typographic control without writing CSS manually. They are particularly useful for non-developers managing sites on managed hosting or VPS with cPanel where direct file access is less common.

Recommended Plugin: Easy Google Fonts

Easy Google Fonts integrates directly with the WordPress Customizer and gives you per-element font size control across the entire site.

Installation and configuration:

1. In your WordPress dashboard, navigate to Plugins > Add New.
2. Search for Easy Google Fonts and click Install Now, then Activate.
3. Go to Appearance > Customize.
4. Select Typography from the Customizer menu.
5. Choose the element you want to modify: Body, Headings (H1–H6), Paragraphs, or any custom selector you define.
6. Use the Font Size slider or input field to set the value.
7. Click Publish to apply changes live.

Alternative Plugin: Fonts Plugin | Google Fonts Typography

This plugin offers a more granular interface and supports variable fonts, which are increasingly relevant for performance-optimized sites. Variable fonts reduce HTTP requests by serving a single font file that covers multiple weights and styles.

Critical Warning: Plugin Conflicts with Block Themes

If you are running a Full Site Editing (FSE) block theme (such as Twenty Twenty-Three or Twenty Twenty-Four), typography plugins that inject CSS into the <head> via wp_enqueue_style may conflict with the theme's global styles defined in theme.json. The result is unpredictable specificity battles. In FSE environments, use the Site Editor (Appearance > Editor) for global typography changes instead of a plugin.

Method 3: Theme Customizer

The WordPress Theme Customizer (Appearance > Customize) is the built-in interface for making theme-level adjustments. Not all themes expose typography controls here — it depends entirely on what the theme developer has registered using the WordPress Customizer API.

Step-by-Step: Adjusting Font Size via the Customizer

1. Go to Appearance > Customize in your WordPress dashboard.
2. Look for a Typography, Fonts, or Text section in the left-hand panel. If no such section exists, your theme does not support this natively.
3. Select the element type: body text, H1, H2, navigation, footer, etc.
4. Adjust the font size using the provided slider or numeric input.
5. The live preview on the right updates in real time.
6. Click Publish to commit the changes.

Important Limitation: Theme Customizer Settings Are Not Portable

Customizer settings are stored in the WordPress database as theme modifications (theme_mods). If you switch themes, all Customizer-based font size changes are lost. They are also not transferable via standard export tools unless you use a plugin specifically designed for Customizer data migration. This is a critical consideration when planning a theme migration on production sites.

Method 4: Custom CSS

Custom CSS is the most precise and flexible method. It is appropriate when the other three methods cannot target the specific element you need, or when you need to apply responsive font sizing using media queries.

Adding CSS via the Customizer (No File Editing)

1. Go to Appearance > Customize > Additional CSS.
2. Enter your CSS rules directly in the editor.
3. Click Publish.

This approach stores the CSS in the database and is safe for non-developers. However, it has a size limit and does not support preprocessors like Sass.

Targeting Specific Elements with CSS

/* Set base body font size */
body {
  font-size: 17px;
  line-height: 1.7;
}

/* Override heading sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Target a specific Gutenberg block class */
.wp-block-paragraph.is-style-lead {
  font-size: 1.25rem;
}

Responsive Font Sizing with clamp()

Modern CSS supports fluid typography using the clamp() function, which eliminates the need for multiple media query breakpoints:

body {
  font-size: clamp(15px, 1.5vw, 18px);
}

h1 {
  font-size: clamp(28px, 5vw, 56px);
}

This approach scales font size smoothly between a minimum and maximum value based on viewport width. It is the current best practice for responsive typography and is supported by all modern browsers.

Editing Theme Files Directly (Child Theme Required)

If you need to add CSS to the theme's stylesheet permanently and avoid the database overhead of the Additional CSS field, add rules to your child theme's style.css file. Never edit the parent theme's files directly — updates will overwrite your changes.

On a server with SSH access, you can edit the file directly:

nano /var/www/html/wp-content/themes/your-child-theme/style.css

After saving, clear your server-side cache and any CDN cache to ensure the updated styles are served to visitors. On a VPS Hosting environment, this typically means running a cache flush command for your caching plugin or reverse proxy (Nginx, Varnish, etc.).

Specificity Pitfalls to Avoid

• Avoid !important as a default fix. It creates a specificity arms race that makes future maintenance extremely difficult.
• Do not set font sizes in pixels on the html element if your theme uses em-based sizing. Changing html { font-size: 20px; } will scale every em-based value across the entire site, often breaking spacing and layout.
• Use rem units for scalability. rem values are relative to the root html element, making them predictable and accessible. Users who increase their browser's default font size will benefit from rem-based layouts, which is a WCAG accessibility requirement.

Accessibility and Font Size: What Google Evaluates

Google's Lighthouse audit flags text that is too small to read as a usability issue. The minimum recommended body font size is 16px for desktop and 14px for mobile, though 16px across all viewports is the safer baseline. The WCAG 2.1 Success Criterion 1.4.4 requires that text can be resized up to 200% without loss of content or functionality — a requirement that rem and em units satisfy by default, while px-only layouts often fail.

If you are hosting a site that serves a global audience or requires accessibility compliance, these considerations should drive your font-size implementation decisions, not visual preference alone.

Caching and Deployment Considerations on VPS

When you modify CSS on a WordPress site hosted on a VPS Hosting or Dedicated Servers environment, the changes may not be immediately visible due to multiple caching layers:

• WordPress object cache (Redis, Memcached)
• Page caching plugins (WP Rocket, W3 Total Cache, LiteSpeed Cache)
• Nginx FastCGI cache
• CDN edge cache (Cloudflare, BunnyCDN)

After making any font-size change, purge all active caches in sequence — plugin cache first, then server-level cache, then CDN. Failure to do this is the most common reason developers report that CSS changes "aren't working."

To flush the Nginx FastCGI cache manually on a Linux VPS:

sudo rm -rf /var/cache/nginx/*
sudo systemctl reload nginx

For LiteSpeed Cache via WP-CLI:

wp litespeed-purge all

Practical Decision Checklist

Use this checklist to select the correct method for your situation:

• Changing one paragraph or heading on a single page — Use the Gutenberg block editor Typography panel.
• Changing font size for all body text or all headings site-wide — Use a typography plugin or the Theme Customizer if your theme supports it.
• Running a Full Site Editing block theme — Use the Site Editor (Appearance > Editor > Styles) and theme.json presets.
• Need responsive, fluid typography — Write custom CSS using clamp() in a child theme stylesheet or Additional CSS.
• Need changes to survive theme updates — Use a child theme, a plugin, or theme.json in a custom block theme.
• Accessibility compliance is required — Use rem or em units; avoid px-only declarations on body text.
• Changes not appearing after editing — Purge all caching layers: plugin, server, and CDN.
• Conflict between block editor and theme styles — Inspect the element in browser DevTools, identify the winning CSS rule, and adjust specificity accordingly.

FAQ

What is the best unit for WordPress font sizes: px, em, or rem?

rem is the recommended unit for font sizes in WordPress. It is relative to the root html element, making it predictable across nested components and inherently accessible — browser-level font size preferences set by the user are respected automatically. Use px only for fixed decorative elements where scaling is undesirable.

Why is my font size change in the Gutenberg editor not showing on the front end?

The most common causes are a caching layer serving a stale version of the page, a theme stylesheet rule with higher CSS specificity overriding the block's inline style, or a typography plugin that resets font sizes globally. Open the page in an incognito window and inspect the element in DevTools to isolate the cause.

Can I change font sizes in WordPress without a plugin or coding?

Yes. The Gutenberg block editor's Typography panel allows per-block font size changes with no coding required. The Theme Customizer also provides font size controls if your active theme registers them. Neither approach requires plugin installation or CSS knowledge.

Will changing font sizes in the Theme Customizer affect my site after a theme update?

The settings themselves are stored in the WordPress database and will not be deleted by a theme update. However, if the theme update changes the underlying CSS structure or removes the Customizer option that controlled the font size, the visual output may change. Using a child theme and custom CSS is more resilient to upstream theme changes.

How do I set different font sizes for mobile and desktop in WordPress?

Use CSS media queries in the Additional CSS panel or a child theme stylesheet, or use the clamp() function for fluid scaling. The Gutenberg block editor also supports per-breakpoint typography settings in some themes via the theme.json layout configuration, though this feature depends on the theme's implementation level.