How to Add Fonts to Elementor

Contents

Free vs Pro Font Options
Upload Fonts in Elementor Pro
Add Custom Fonts in Elementor Free
Embed Fonts in Elementor Pages
Managing Fonts in Design Panel
Troubleshooting Font Uploads
Useful Links
Conclusion

Want to personalize your WordPress website with unique fonts? Elementor makes it easy to integrate custom typography whether you're using the free version or Elementor Pro. This guide explains how to add, upload, and manage fonts directly within the Elementor editor.

Elementor Free vs Pro Font Options

Elementor offers built-in Google Fonts by default, but when it comes to uploading custom fonts, Pro users have extra flexibility. Here's a quick comparison:

Feature	Elementor Free	Elementor Pro
Access Google Fonts	✅	✅
Upload custom fonts	❌	✅
Use system fonts	✅	✅

While the free version supports Google and system fonts, uploading your own font files requires Elementor Pro or a plugin workaround.

How to Upload Fonts in Elementor Pro

With Elementor Pro, uploading custom fonts is a straightforward process thanks to its built-in font management feature. This allows you to integrate your own typography styles without needing third-party plugins.

Step-by-step instructions to upload custom fonts:

In your WordPress dashboard, navigate to Elementor → Custom Fonts.
Click the Add New button and give your custom font a clear and recognizable name.
For each font weight and style (like Regular, Bold, Italic), click Add Font Variation and upload the appropriate file.
Accepted formats include: .woff, .woff2, .ttf, and .svg.
Once all variations are uploaded, click Publish.

Applying your uploaded font:

Open any page or template using the Elementor editor.
Select a text widget and go to the Style tab.
In the Typography section, choose your custom font from the dropdown list.

Once published, your font is usable across your entire website within any Elementor widget that includes text styling options.

💡 Consider uploading all relevant font weights (like Light, Medium, Bold) to maintain design consistency and flexibility.

How to Add Custom Fonts in Elementor Free

Since the free version lacks a built-in uploader, you'll need a workaround using a plugin like Custom Fonts.

Install the Custom Fonts plugin

Go to Plugins → Add New in WordPress.
Search for Custom Fonts by Brainstorm Force and install it.
Upload your font files via Appearance → Custom Fonts.

Register and use your font

Assign a font name and upload various formats (woff, ttf, etc.).
Use a theme that supports custom fonts or add CSS to register it.
Access the font in Elementor by referencing its name in custom CSS or typography settings if supported.

⚡ Elementor Free doesn’t auto-integrate custom fonts — you may need to tweak your theme or add manual CSS.

Embed Fonts in Elementor Pages

Once fonts are added, styling your content is simple:

Edit any section or widget with text.
Open the Style tab in the Elementor editor.
Under Typography, click Family and choose your uploaded font.

💡 Use different fonts for headings and paragraphs to improve visual hierarchy.

Managing Fonts in Elementor Design Panel

To organize and customize typography across your website, use Global Fonts:

Go to Site Settings → Global Fonts in Elementor editor.
Assign default fonts for Primary, Secondary, Text, and Accent styles.
This ensures a consistent look throughout your design.

✅ Global Fonts simplify styling by letting you change your typography in one place.

Troubleshooting Font Upload Issues

If you're facing issues on how to add custom fonts to Elementor and the fonts don't show up or apply correctly, try the following fixes:

Common reasons and solutions:

Incorrect file format: Make sure you've uploaded .woff or .woff2 files. These are the most reliable for web rendering.
File not fully uploaded: Sometimes large font files can fail to upload without error. Try re-uploading them or checking file size limits.
Cache interference: Clear both your browser cache and WordPress caching plugins to reflect new fonts.
Theme overrides: Some WordPress themes include their own font styles. Try temporarily switching to a default theme (like Twenty Twenty-Four) to test if your font works.
Plugin conflicts: Disable any performance or typography-related plugins and recheck font behavior in Elementor.

⚡ Avoid uploading only .ttf — .woff is the most compatible for web usage and preferred by most browsers.

Useful Links

How to Add Custom Fonts to Your WordPress Website – Official Elementor guide explaining how to upload custom fonts (WOFF, WOFF2, TTF, SVG, EOT) and use them across your site.

Custom Fonts – Host Your Fonts Locally – Plugin page from Brainstorm Force, showing features, browser-format guidance, and integration with Elementor for free users.

90+ Top Widgets to Achieve Your Goals with Elementor!

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 add font in WordPress Elementor, both in the free version with a plugin and through Elementor Pro's built-in tools. Adding custom fonts helps strengthen your brand identity and elevate your website's design. Explore different typography options to create the exact look and feel you want.