Complete Guide to Add Custom Fonts in Elementor Free & Pro version (2024)

Whether you’re using Elementor Free version or Pro and you’re looking to
↪ add custom fonts in Elementor

I can assure you; this is the only blog post you’ll need to read.

And by the end of this post, you’ll know…

So, without a further ado, let’s dive straight in…

How to Add Custom Fonts in Elementor FREE Version?

The “Custom Fonts” feature is only available in the pro version & hence
adding custom fonts in Elementor Free version will require you to install a plugin.

And here are few of the best custom fonts plugins for Elementor:

• Custom Fonts by Brainstorm Force
• Use Any Fonts by DnessCarkey

So if you’re comfortable installing a plugin,
The one you’ll need to install is – Custom Fonts by Brainstorm Force.

Although the “Use Any Font” plugin is equally good & supports more page builders,
there’s a solo developer behind it and has over 200K+ Installations.

Whereas the “Custom Fonts” plugin is built by the Brainstorm Force (the people behind Astra) and has over 300K+ Installations.

Also, the thing I liked most about this plugin is that it works throughout WordPress. This means it will continue working even if you uninstall your page builder, be it Elementor or Beaver builder.

So, let’s dive in…

 Now if you’re unaware about what these formats are, here’s the quick explanation…

• The Web Open Font Format (WOFF): WOFF format is the most recommended as it's supported by all modern browsers.
• The Web Open Font Format (WOFF 2.0): This one is known to be better than WOFF 1.0 & used by super modern browsers.
• TrueType Fonts (TTF): This font was developed by Apple and Microsoft in the late 1980s & still used on computers & the web.
• SVG Fonts/Shapes: SVG fonts allow SVG to be used as glyphs when displaying text. Use this format to support legacy iOS.
• Embedded OpenType Fonts (EOT): This font file works on Internet Explorer.

You can upload any of the font formats, just make sure to pair it right
(I’m talking about the Font weight)

Once done, you’ll see the entire list of custom fonts added.

Also, you’ll get the same font options (along with font weight) under typography settings inside Elementor.

That’s it!
This is how you can add custom fonts in free version of Elementor.

Now talking about font weights, I use & recommend font weights between 300-800.

Let me help you understand the font weight & name mapping…

Understanding Common Font Weight Name Mapping

The numerical values 100 to 900 roughly correspond to the following common weight names:

Value	Common Weight Name
100	Thin
200	Extra Light
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold
700	Bold
800	Extra Bold
900	Black (Heavy)

Source: Mozilla Dev

Now that you’ve complete understanding of font formats & font weight, let me share some of the best resources for web fonts followed by a quick guide on how to add custom fonts in Elementor Pro version.

How to Add Custom Fonts in Elementor Pro?

If you’re on the pro version of Elementor, adding custom fonts is pretty quick & easy.
Here’s how to do it…

It's recommended to upload all formats, but you can proceed with just a few (WOFF, WOFF2, and TTF).

Upload each font format individually, then start adding more variations like weight (100-900) and styles (italic) for the same font.

✍ Note: For each font variation, you'll need to upload its file individually. Currently, there's no other way. Once you've added the font variations, simply click the publish button on the right-hand side.

Now, the custom font will be added to Elementor typography and will be available for all Elementor widgets, whether it's the heading widget or accordion widget.

By the way, here are the Best Elementor accordion widgets to use in 2024.

Step 3: Well, step 3 is just to open the Elementor editor & do the styling stuff. Drag any widget & go to its typography settings.

You’ll get to select your custom font under typography > font-family settings.

Designing your landing pages with the custom fonts you want will be a lot of fun.

Lastly, I recommend adding your custom font to the global typography in Elementor for a better workflow.

That’s it.
This is how you can add custom fonts in both Elementor free as well as Elementor pro version.

Now let me share the fonts used by sites built with Elementor…

Top Web Fonts Used by Popular Elementor Websites

Below is a list of popular websites built using Elementor, along with the custom web fonts they use to create a unique, branded appearance:

1. Elementor
   • Visit Site
   • Fonts Used: Ivar Heading & DM Sans
     Elementor, the tool itself, uses a combination of Ivar Heading for bold and stylish headlines, paired with DM Sans for a clean, modern body text.

2. WPCrafter
   • Visit Site
   • Fonts Used: Poppins & Lato
     This WordPress resource hub uses Poppins for headlines and Lato for body text, offering a balance of readability and modern design across all devices.

3. Kuldeep Rathore
   • Visit Site
   • Fonts Used: Hanken Grotesk
     My personal site uses Hanken Grotesk throughout, known for its simplicity and modern appeal, ensuring a seamless reading experience across the blog and tutorials.

4. Presto Player
   • Visit Site
   • Fonts Used: Proxima Nova
     Proxima Nova, a classic web font, is used on Presto Player’s website to give the content a professional yet approachable feel, perfect for its multimedia offerings.

5. ThePlusAddons
   • Visit Site
   • Fonts Used: Plus Jakarta Sans
     The Plus Addons website uses Plus Jakarta Sans, a contemporary sans-serif font, to highlight its cutting-edge design and functionality for Elementor users.

Want to download similar fonts? Here are some of the best resources…

Best Resources to Get Web fonts that Look Modern & Elegant

Just like wallpaper download sites, there are many similar sites for downloading fonts.

Honestly, I haven’t used custom fonts on any of my Elementor websites since I'm satisfied with a combination of Hanken Grotesk, Montserrat, and Mulish.

However, when I need custom fonts for Photoshop work, I usually visit these sites:

• Dafont.com
• Myfonts.com
• OnlineWebFonts .com
• FontShop

Lastly, I would like to share some of my favorite fonts including premium ones:

• Hanken Grotesk (Used throughout my site)
• Montserrat
• Mulish
• Nunito
• Spartan
• Josefin Sans
• Sofia Pro (Paid)
• Proxima Nova (Paid)
• Mont (Paid)
• Futura PT (Paid)

These are just a few of them, here's a complete list of 15+ Best Elementor Fonts to use in 2024.

By the end of this post, you should be able to add custom fonts to your WordPress Elementor website.

If you face any issues or need help, drop your query in the comments section, and I’ll be glad to assist you.

Which custom font are you planning to add?
Let me know in the comments below.

Cheers,
Kuldeep – Your Elementor Guy