How to Display Fonts in All Caps in Elementor

To display fonts in all caps in Elementor, select the widget, open the Style tab, expand Typography, and set the Transform dropdown to Uppercase. That one setting converts any heading, button, or text block to capital letters without retyping anything. For site-wide caps, use Site Settings > Typography, and for fine control, a single line of CSS (text-transform: uppercase;) does the job. This guide walks through all three methods, when to use each, and how to fix the cases where the setting refuses to stick.

Why Use All Caps Fonts?

Used with restraint, all caps text can:

1. Draw the eye: Capitals give headings, labels, and buttons extra visual weight, which helps visitors scan a page.
2. Create a Minimalist Aesthetic: Short uppercase labels with generous letter spacing are a staple of clean, modern typography.
3. Establish Brand Identity: Many brand guidelines specify uppercase for taglines, menu items, or section labels, and Elementor lets you match them exactly.

One honest caveat before you start: all caps slows reading in long passages because word shapes disappear. Keep it for short strings such as headings, buttons, and menu labels, and leave body text in sentence case. Your readers will thank you.

A second reason to use the methods below instead of typing capital letters by hand: when caps come from CSS, the underlying text stays normally cased. Screen readers pronounce it correctly, search engines index clean text, and you can change your mind later by flipping one setting instead of retyping every heading.

Methods to Use All Caps Fonts in Elementor

1. Using Elementor’s Built-In Typography Options

Elementor lets you apply the Uppercase text transform directly from the widget settings. This works in both Elementor Free and Pro, including the current Elementor 4 releases. Follow these steps:

1. Edit Your Page with Elementor
   • Open the page or post you want to edit.
   • Click the “Edit with Elementor” button.
2. Select the Text Element
   • Click on the widget containing the text (e.g., Heading, Text Editor, or Button).
3. Apply the All Caps Style
   • In the editing panel, go to the Style tab.
   • Under Typography, click the pencil icon to expand the full options.
   • Find the Transform dropdown and select Uppercase.
4. Save Changes
   • Click the “Update” (or “Publish”) button to save and apply your design changes.

The same Transform dropdown also offers Lowercase and Capitalize, so you can standardize casing across a page even when editors type inconsistently.

2. Using Custom CSS for Advanced Styling

For more control, you can use CSS to enforce all caps on specific elements. The per-widget Custom CSS field requires Elementor Pro:

1. Access the Widget’s Advanced Tab
   • Select the widget you want to style.
   • Open the Advanced tab.
2. Add Custom CSS
   • Scroll to the Custom CSS section (available in Elementor Pro).
   • Insert the following CSS code:
     css

     selector { text-transform: uppercase; }
3. Target Multiple Elements (Optional)
   • To apply the style site-wide, add this CSS to Appearance > Customize > Additional CSS instead (no Pro licence needed):
     css

     h1, h2, h3.button { text-transform: uppercase; }

The selector keyword in Elementor’s Custom CSS field automatically targets the current widget, so you never have to hunt for class names. On Elementor Free, give the widget a CSS class under Advanced > CSS Classes (for example caps-label) and style .caps-label { text-transform: uppercase; } from Additional CSS to get the same result without Pro.

3. Adjust Global Typography Settings

If you want to apply all caps site-wide or for specific text types like headings:

1. Go to Global Settings
   • In the Elementor editor, click the menu (hamburger) icon in the top corner of the panel.
   • Open Site Settings > Typography.
2. Set Global Styles
   • Choose the text type (e.g., Headings, Body Text, Buttons).
   • Set the text transform to Uppercase.
3. Update the Site
   • Save changes, and every element using these global styles will automatically display in all caps.

Global typography is the right choice when uppercase headings are part of your brand rather than a one-page effect. Set it once and every new page inherits the style, which keeps a multi-author site consistent.

Which method should you use?

Method	Requires Pro?	Scope	Best when
Typography Transform setting	No	One widget	Styling a single heading or button
Widget Custom CSS	Yes	One widget, any property	You need uppercase plus other custom rules
Additional CSS (Customizer)	No	Any selector, site-wide	Applying caps to element types on Elementor Free
Site Settings > Typography	No	Global styles	Uppercase is part of your brand system

Tips for Using All Caps Fonts

1. Pair with Legible Fonts: Sans-serif fonts like Roboto, Inter, or Open Sans stay readable in caps. Decorative and script fonts usually fall apart when uppercased.
2. Limit Usage: Reserve all caps for headings, labels, or calls-to-action. Full paragraphs in capitals read as shouting and slow readers down.
3. Adjust Spacing: Increase letter spacing slightly (0.05em to 0.1em in Elementor’s Typography panel) so capital letters breathe. Tight caps look cramped.
4. Watch the font weight: Uppercase text looks heavier than the same text in sentence case. Dropping one weight step (say, from bold to semi-bold) often balances it.
5. Test Across Devices: Check your design on mobile, tablet, and desktop. Long uppercase headings wrap awkwardly on small screens, so keep them short or reduce the mobile font size using Elementor’s responsive controls.

Popular Use Cases for All Caps in Elementor

• Headings: Make section headers stand out, particularly short ones of two to four words.
• Navigation Menus: Create a clean and uniform menu design; most agency and portfolio themes uppercase their menus.
• CTA Buttons: Emphasize action-oriented text like “BUY NOW” or “SUBSCRIBE.” Caps plus letter spacing is the classic button treatment.
• Brand Statements: Use for taglines or slogans to reinforce brand identity.
• Overline labels: The small uppercase category label above a heading (“OUR SERVICES”, “CASE STUDY”) is one of the most common patterns in modern web design and takes ten seconds with the Transform setting.

Troubleshooting Common Issues

1. Text Not Displaying in All Caps
   • Confirm the Text Transform setting is applied to the right widget, not its parent container.
   • Check for conflicting CSS styles with your browser’s inspector: right-click the text, choose Inspect, and look at which text-transform rule wins.
   • Clear any caching or optimization plugin after saving. Stale CSS files are the most common reason a saved change “does nothing”.
2. Font Style Overwritten by Theme
   • Some WordPress themes override Elementor styles. Add !important to your CSS:
     css

     selector { text-transform: uppercase !important; }
   • A cleaner long-term fix: in Elementor’s Site Settings, enable Elementor’s default fonts and colors so the theme stops competing with your typography choices.
3. Typography Options Missing
   • Check if you’re using Elementor Free. The per-widget Custom CSS field is a Pro feature, but the Transform dropdown and Site Settings typography are free. Use the CSS Classes workaround above if you need custom CSS without Pro.
4. Acronyms read out letter by letter
   • Screen readers sometimes spell out words that look like acronyms. Because the CSS method keeps the underlying text in normal case, it avoids this problem. Never retype content in capitals when a transform can do it.

Enhance Typography with Elementor Add-Ons

For more typography controls than Elementor ships with, these add-ons are actively maintained in 2026:

• Wbcom Essential: 43 Elementor widgets including headings, sliders, and content blocks with full typography controls, built to pair with the BuddyX theme.
• Essential Addons for Elementor: A large widget library with advanced text and heading effects.
• Ultimate Addons for Elementor: Extra style controls for text elements, including gradient and dual-color headings.

Frequently asked questions

How do I make text all caps in Elementor without Pro?

Use the free Transform setting: select the widget, open Style > Typography, expand the options with the pencil icon, and set Transform to Uppercase. Site Settings > Typography and the WordPress Customizer’s Additional CSS are also free.

Why is my uppercase setting not working?

Usually a caching plugin serving old CSS or a theme rule overriding Elementor. Clear your cache first, then inspect the element in your browser to see which text-transform rule is winning, and add !important if the theme refuses to yield.

Should I type text in capitals instead of using the setting?

No. Keep the source text in normal case and let CSS do the transformation. That keeps the text accessible to screen readers, clean for search engines, and easy to change later.

Can I apply all caps to every heading on my site at once?

Yes. In the Elementor editor, open Site Settings > Typography and set Transform to Uppercase for headings, or add h1, h2, h3 { text-transform: uppercase; } to Appearance > Customize > Additional CSS.

Where to start

Start with the Transform dropdown; it covers nine out of ten cases in a few clicks and works on Elementor Free. Move to Site Settings when uppercase becomes part of your brand system, and reach for custom CSS only when you need caps combined with other rules the panel doesn’t offer. Keep caps short, add a little letter spacing, and test on mobile before you publish.

---

Web Design Trends

10 Best Free Elementor Addons for WordPress

How to Change Font in WordPress? (Easy Guide for Beginners)