How to Change Font Size in WordPress Elementor

Contents

Access Elementor Editor
Typography Settings
Responsive Font Sizes
Theme Style Typography
Headings vs. Paragraphs
Design Tips
Troubleshooting
Useful Links
Conclusion

Changing font size in Elementor is a quick way to enhance your WordPress website's readability and visual appeal. Elementor offers powerful typography settings that let you control text appearance across all device types.

Accessing the Elementor Editor

To begin modifying your text, first launch the Elementor editor:

Navigate to your WordPress Dashboard.
Go to Pages or Posts, then click Edit with Elementor.
Click on the text block you want to modify.

If you are new to Elementor, each content section is built using widgets, and each widget offers its own design controls including font customization.

💡 Elementor works in real time, so you can preview changes instantly while editing typography settings.

Using Typography Settings

Elementor provides flexible typography controls for every text element like headings, paragraphs, and buttons. Here’s how to adjust them:

Change text size in Elementor editor

Select the text widget.
In the left panel, click the Style tab.
Under Typography, click the pencil icon to expand options.
Adjust the Size slider to change font size.

In addition to font size, you can also customize font family, weight, transform (uppercase, lowercase), style (italic), decoration (underline, line-through), line height, and letter spacing.

✅ Use PX, EM, or REM units for scalable typography. EM and REM are better for responsive design.

Setting Responsive Font Sizes

Elementor allows custom font sizes for desktop, tablet, and mobile views:

In the Typography settings, click the device icon next to Size.
Select each device tab (Desktop, Tablet, Mobile).
Input a specific value per device to ensure optimal readability.

This feature is essential for ensuring your design remains consistent and readable on all screen sizes without manually coding media queries.

⚡ Avoid setting absolute sizes like large PX values on mobile; they may cause text to overflow or break layout.

Using Theme Style for Typography

To apply consistent font sizes across your website, configure global settings via Elementor Theme Style:

Click the hamburger menu in the Elementor panel.
Choose Site Settings > Typography.
Set base styles for Body, Headings (H1–H6), and buttons.
Click Update to apply changes globally.

This method ensures that all new widgets and text blocks inherit a unified look, helping streamline future edits and maintain brand identity.

✅ Centralized font control reduces styling conflicts and improves website consistency.

Headings vs. Paragraph Text

Adjust heading size in WordPress Elementor. Use Heading widget for H1–H6 elements and modify font size via Style tab under Typography settings.

Change paragraph font in Elementor. Text Editor widget lets you change body text size, again under the Typography section.

You can also assign HTML tags to text blocks to match your site's SEO structure. For example, setting a styled paragraph as an H2 or H3 when needed.

💡 Stick to a typographic hierarchy to maintain clear structure: larger headings, medium subheadings, and readable body text.

Additional Design Tips

Enhance text readability and branding with these Elementor typography tips:

Use consistent font families across widgets.
Combine font size with line height and letter spacing.
Apply hover styles for buttons and headings for interactivity.
Preview on all devices using Elementor’s responsive mode.
Keep your font sizes accessible—aim for a minimum of 16px for body text.

Consider using Google Fonts via Elementor for more options without sacrificing performance. You can also load only the weights and styles you need to reduce page load time.

✅ Proper text formatting improves user engagement and SEO performance.

Troubleshooting Font Size Issues

Sometimes your font changes might not appear correctly. Try these fixes:

Clear your browser and website cache.
Disable conflicting plugins or themes temporarily.
Check if global typography settings are overriding local changes.
Use the Navigator tool to ensure correct widget is selected.
Ensure that custom CSS is not forcing unwanted styles.

If all else fails, inspect the element using browser DevTools to see where the font size rule is being applied or overridden.

⚡ Overuse of inline styles or duplicated widgets can prevent font changes from displaying as expected.

Useful Links

How to Change Font Size, Color, Family & Style in Elementor – Learn how to adjust typography settings, including font size, within Elementor's Style tab.

Style Tab Typography – Detailed guide on using the Typography control to style text elements in Elementor.

Responsive Editing for Mobile and Tablets – Instructions on customizing font sizes and other settings for different devices using Elementor's responsive editing tools.

Set a Theme Style – Guide on applying global typography settings across your website using Elementor's Theme Style feature.

Units of Measurement – Explanation of different CSS units (PX, EM, REM) and their impact on responsive typography.

Enhance Your Elementor with Powerful Widgets!

Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!

No Results

See all Widgets

Conclusion

Now you know how to change font size in Elementor through various methods—widget-specific settings, global Theme Style, and responsive design controls. Whether you're adjusting headings, paragraphs, or button labels, Elementor gives you precise control over text appearance on all devices. Mastering these options ensures your WordPress website is both beautiful and readable. Use these techniques to align your typography with your brand and enhance user experience.