How to Add Custom Fonts to Elementor (and Make Sure They Display Correctly)

Typography plays a huge role in defining your website’s identity. Whether you’re building a personal brand or a client project, using a custom font can make your design stand out and strengthen your visual identity. In this guide, we’ll show you how to easily upload and manage custom fonts in Elementor — and make sure they display properly in both the editor and the frontend.

Why Use Custom Fonts?

Elementor already comes with hundreds of Google Fonts built-in. However, there are many cases when you might need to upload your own:

• To match your company or client’s brand guidelines
• To use premium or licensed fonts not available on Google Fonts
• To achieve a unique design style

By uploading fonts manually, you ensure your site looks consistent everywhere — no matter which device or browser your visitors use.

How to Upload Custom Fonts in Elementor

Elementor Pro provides a simple way to add your own font files directly in the editor. Here’s how to do it step by step:

Step 1: Prepare Your Font Files

Make sure you have your font files in the following formats for best compatibility:

• .woff (recommended)
• .woff2
• .ttf
• .svg
• .eot

Having at least .woff and .woff2 formats ensures your fonts load fast and work across all modern browsers.

Step 2: Go to Custom Fonts Settings

In your WordPress dashboard, go to:

Elementor → Custom Fonts → Add New

Give your font a name (for example, “MyBrand Sans”) and upload each weight and style (Regular, Bold, Italic, etc.) in the corresponding fields.

Step 3: Use the Font Inside the Editor

Once uploaded, your new font will appear inside the Typography panel of any Elementor widget that supports text — like Heading, Text Editor, or Button.

Select your font from the dropdown list, and Elementor will automatically apply it to your selected element.

Step 4: Verify Display on Frontend

After saving, visit the live version of your page to make sure the font is rendered correctly on the frontend. If it doesn’t appear properly, try clearing cache (browser + site), or re-upload the font with a different name.

Alternative: Use Custom CSS or @font-face

If you’re using the free version of Elementor, you can still load custom fonts manually using CSS. Here’s how:

@font-face {
  font-family: 'MyBrand Sans';
  src: url('https://yourdomain.com/fonts/MyBrandSans.woff2') format('woff2'),
       url('https://yourdomain.com/fonts/MyBrandSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Then, apply your font to specific elements via the Elementor widget’s “Advanced → Custom CSS” (available in Pro) or globally in your theme stylesheet:

body {
  font-family: 'MyBrand Sans', sans-serif;
}

Troubleshooting Common Issues

• Font not showing in editor: try refreshing the page or reloading the editor; check browser cache.
• Font not displaying on live site: verify the font file path is correct and accessible.
• Performance drop: use optimized webfont formats (.woff2) and preload critical fonts.

Best Practices for Custom Fonts

• Keep font files under 200KB for faster load times.
• Use only the weights you actually need (don’t upload all variants).
• Host fonts locally for better performance and privacy.
• Always test responsiveness and cross-browser compatibility.

Wrapping Up

Adding custom fonts in Elementor helps you create a truly branded experience for your visitors. Whether you use the built-in Custom Fonts feature or the manual CSS method, always verify the display on both desktop and mobile. A consistent and well-optimized font setup can dramatically improve your site’s design and user perception.

Next up, we’ll explore how to enhance your site even more with animations and transitions — stay tuned!