Summarize this article with:
Small text kills readability. Visitors leave.
Learning how to change the font size on WordPress takes less than 5 minutes, yet most site owners never touch their typography settings.
The default sizes in many WordPress themes were not designed with your audience in mind. They are generic starting points.
This guide walks you through five methods to adjust text size: the Block Editor, Site Editor global styles, Theme Customizer, custom CSS, and mobile-specific controls.
Each method serves different needs. Some change individual blocks. Others update your entire site at once.
By the end, you will know exactly which approach fits your situation and how to execute it in minutes.
How to Change the Font Size on WordPress
Changing the font size on WordPress is the process of adjusting text dimensions across your website using the Block Editor, Theme Customizer, Site Editor, or custom CSS code.
Users need this when improving web accessibility, fixing readability issues, or matching brand typography guidelines.
This guide covers 5 methods requiring 3-5 minutes and no coding knowledge for most approaches.
Prerequisites
Before adjusting WordPress typography settings, confirm you have the following:
- WordPress version: 6.0 or later for full Block Editor typography features
- Access level: Administrator or Editor role in WordPress Admin
- Theme requirement: Block theme for Site Editor method, any theme for Customizer
- Time needed: 3-5 minutes per method
- Skills: Basic WordPress dashboard navigation
Not sure if your theme supports the Gutenberg Editor? Learn how to enable the Gutenberg editor in WordPress first.
How Do You Change Font Size in the WordPress Block Editor?
You change font size in the WordPress Block Editor by selecting any text block, opening the Typography panel in the right sidebar, and choosing from preset sizes or entering a custom pixel value that applies immediately to the selected content.
What Are the Steps?
Action:
- Open any post or page in the Block Editor
- Click the Paragraph Block or Heading Block you want to modify
- Look at the right sidebar, find Typography under Block settings
- Select a preset: Small (13px), Medium (20px), Large (36px), Extra Large (42px)
- Or click the px field and type a custom value
The text updates in real-time. No save required to preview.
Why Use This Method?
Best for adjusting individual blocks without affecting site-wide styles.
Perfect when you need one heading larger for emphasis or a specific paragraph more readable.
Changes stay isolated to that single block. Other content remains unchanged.
Where Do You Find Global Font Size Settings in WordPress?
You find global font size settings in WordPress through Appearance, then Editor, then Styles, then Typography in the left panel, where you can set site-wide defaults for body text, headings H1 through H6, and link text that apply across all pages automatically.
What Are the Steps?
Action:
- Go to Appearance > Editor in WordPress Dashboard
- Click the Styles icon (half-black, half-white circle) in top right
- Select Typography from the panel
- Choose Text for body content or Headings for H1-H6
- Adjust the Size slider or enter specific pixel values
- Click Save to apply changes site-wide
This method requires a block theme like Twenty Twenty-Three or Twenty Twenty-Four.
Why Use This Method?
Creates consistent visual hierarchy across your entire site with one change.
Sets default typography that applies to all existing and future content.
No need to adjust individual blocks repeatedly. Want to also control spacing? Check out how to change line spacing in WordPress.
How Do You Change Font Size Using the Theme Customizer?
You change font size using the Theme Customizer by navigating to Appearance, then Customize, then finding the Typography section where available options vary by theme but typically include base font size, heading sizes, and sometimes separate mobile typography controls with live preview.
What Are the Steps?
Action:
- Navigate to Appearance > Customize
- Look for Typography, Fonts, or Design Options (location varies by theme)
- Find Base Font Size or Body Text Size controls
- Use the slider or input field to set your preferred size
- Preview changes in real-time on the right side
- Click Publish when satisfied
Some themes offer separate controls for desktop and mobile font display settings.
Why Use This Method?
Works with classic themes that do not support Full Site Editing.
Provides user experience friendly live preview before committing changes.
Many premium themes include advanced responsive typography controls here that are not available elsewhere.
What Is the CSS Method for Changing Font Size?
The CSS method for changing font size involves adding custom code to the Additional CSS panel in the Theme Customizer, where you write font-size declarations targeting specific HTML elements like paragraphs, headings, or custom classes to override default theme styling with precise pixel or rem values.
What Are the Steps?
Action:
- Go to Appearance > Customize > Additional CSS
- Add your CSS code targeting specific elements
- Preview changes on the right side
- Click Publish to save
Common CSS examples:
“ / Body text / p { font-size: 18px; }
/ All headings / h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; }
/ Specific class / .large-text { font-size: 24px; } `
Why Use This Method?
Gives precise control when theme options fall short. Target any element on your site.
Works with every WordPress theme regardless of built-in typography controls. Concerned about code errors? Learn about fixing syntax errors before editing.
How Do You Change Font Size for Specific Headings?
You change font size for specific headings by selecting individual Heading Blocks in the editor and adjusting Typography settings, or by setting global heading sizes through Site Editor Styles where H1 through H6 each have separate size controls for consistent heading hierarchy across your content.
What Are the Steps?
Per-heading method:
- Click any Heading Block in the Block Editor
- Open Block settings in right sidebar
- Expand Typography panel
- Set custom size in pixels or use presets
Global heading method:
- Go to Appearance > Editor > Styles
- Click Typography, then Headings
- Adjust sizes for H1, H2, H3, H4, H5, H6 individually
- Save changes
Why Use This Method?
Proper heading sizes create clear content structure that improves readability and SEO.
Need help with heading structure? See how to add subheadings in WordPress.
How Do You Change Mobile Font Size Separately?
You change mobile font size separately using media queries in Additional CSS that apply different font-size values based on screen width, or through theme settings that offer dedicated mobile typography controls for tablets and smartphones with specific viewport breakpoints.
What Are the Steps?
CSS media query method:
` / Tablets and smaller / @media (max-width: 768px) { body { font-size: 16px; } h1 { font-size: 32px; } }
/ Mobile phones / @media (max-width: 480px) { body { font-size: 14px; } h1 { font-size: 28px; } } `
Theme settings method:
- Check Appearance > Customize > Typography
- Look for Mobile or Responsive tabs
- Adjust mobile-specific font sizes
- Preview using responsive mode toggle
Why Use This Method?
Text legible on desktop often appears too large or small on mobile screens.
Follows mobile-first design principles for better usability across devices.
Verification
After changing font sizes, confirm your adjustments display correctly across your WordPress site.
Verification checklist:
- View the frontend (not just the editor preview)
- Check multiple pages and posts
- Test on mobile devices or use browser responsive mode (F12 > toggle device toolbar)
- Clear browser cache if changes do not appear (Ctrl+Shift+R)
- Clear WordPress caching plugin if installed
- Verify text remains readable at different zoom levels
Consider accessible typography guidelines: body text should be at least 16px for comfortable reading.
Troubleshooting
Font Size Changes Not Appearing
Issue: You saved changes but the frontend looks the same.
Solution: Clear all caches. Browser cache first (Ctrl+Shift+R), then WordPress caching plugin, then CDN if applicable.
Changes Only Apply to New Content
Issue: Old posts show original sizing while new posts show updated sizes.
Solution: You likely changed Block Editor defaults, not global styles. Use Site Editor > Styles for site-wide changes, or edit individual posts.
Theme Overriding Custom Sizes
Issue: CSS changes get ignored by theme styling.
Solution: Add !important to your CSS declaration: p { font-size: 18px !important; }
Still having display problems? Check if you are experiencing a WordPress theme error.
Font Size Looks Different on Mobile
Issue: Desktop looks correct but mobile appears wrong.
Solution: Add media queries for mobile breakpoints or check theme responsive typography settings. Test using responsive design preview tools.
Typography Panel Missing in Block Editor
Issue: Cannot find Typography options in block settings.
Solution: Click the three-dot menu in the block toolbar > Show more settings. Or check if your theme disabled typography controls.
Related Processes
- How to change link color in WordPress
- How to change the background color on WordPress
- How to add Adobe fonts to WordPress
- How to justify text in WordPress
- How to indent in WordPress
FAQ on How To Change The Font Size On WordPress
Can I Change Font Size Without Coding?
Yes. The Block Editor and Theme Customizer let you adjust font size without writing any code.
Select a text block, open Typography settings in the sidebar, and pick a preset or custom pixel value. No technical skills required.
Why Is My Font Size Not Changing?
Browser cache or WordPress caching plugins often display outdated styles.
Clear your browser cache first (Ctrl+Shift+R), then clear any caching plugin. If the issue persists, your theme CSS may override your changes with higher specificity.
What Is the Best Font Size for WordPress?
Body text should be 16px to 18px minimum for comfortable reading on screens.
Headings vary: H1 typically ranges from 32px to 48px, H2 from 24px to 36px. Test on mobile devices to confirm legibility.
How Do I Change Font Size in WordPress Without a Plugin?
Use the built-in Block Editor typography panel, Site Editor global styles, or add custom CSS through Appearance then Customize then Additional CSS.
WordPress core provides multiple native options. Plugins are optional.
Can I Set Different Font Sizes for Desktop and Mobile?
Yes. Add CSS media queries targeting specific breakpoints like 768px for tablets or 480px for phones.
Some premium themes include separate mobile typography controls in the Customizer for easier adjustments without code.
How Do I Change the Font Size of a Specific Heading?
Click the Heading Block in the editor, open the right sidebar settings, expand Typography, and enter your desired size.
This changes only that specific heading. Other headings remain unaffected.
Where Is the Typography Setting in WordPress?
Block Editor: right sidebar under Block settings when a text block is selected.
Site Editor: Appearance then Editor then Styles then Typography. Theme Customizer: Appearance then Customize, then look for Typography or Fonts section.
Does Changing Font Size Affect SEO?
Indirectly, yes. Readable text improves user engagement metrics like time on page and bounce rate.
Proper heading sizes (H1 through H6) create clear content hierarchy that search engines use to understand your page structure.
How Do I Change Font Size in the Classic Editor?
The Classic Editor uses a formatting dropdown in the toolbar. Select text, then choose a heading level or paragraph format.
For precise pixel control, switch to Text view and add inline CSS or use a plugin.
Can I Change Font Size for All Posts at Once?
Yes. Use Site Editor global styles (Appearance then Editor then Styles) to set site-wide typography.
Changes apply to all existing and future content automatically. Individual blocks can still override these defaults when needed.
Conclusion
You now know how to change the font size on WordPress using five different methods.
The Gutenberg editor handles individual blocks. Global styles control site-wide typography. The Customizer works for classic themes. CSS gives you precise pixel values.
Pick one method and test it. Takes three minutes.
Start with your body text. If visitors squint, bump it to 18px. Then move to your heading hierarchy and adjust H1 through H6 for clear content structure.
Check mobile display. What looks perfect on desktop often needs adjustment for smaller screens.
Good text formatting directly affects content readability. Visitors stay longer. They read more. They convert better.
Your WordPress dashboard has everything you need. No plugins required.
