Simple Ways to Add Custom Fonts in Elementor Free & Pro version (2024)

So for some reason, you’ve decided to add custom fonts to elementor instead of using Google fonts that come by default with Elementor.

Well, my friend, this decision can take your Elementor website to the next level.

In this guide, you'll get to know how to add custom fonts in elementor free and pro versions.

Also, at the end of this post, I’ve shared some of the useful resources from which you can get premium fonts (free & paid) for your elementor website. So without further ado, let's dive in…

Quick note: I’m assuming that you already have the Pro version of Elementor because the “custom fonts” feature is only available in the Pro version.

In case you don’t have one, check out the second method where I’ve also shown how to add custom fonts to Elementor FREE version but I highly recommend grabbing one license of Elementor Pro as it will save you from adding a ton of plugins to your site & also, you get a dozen of features with priority support.

→ Get Elementor Pro here (Best discounts)

3 Simple Steps to Add Custom Fonts to Elementor (Pro Version)

Step 1: Once you’re inside your WordPress dashboard, navigate to Elementor > Custom Fonts & then simply click on the Add New button.

Step 2: Now enter the name of your Font Family & then click on Add Font Variation.

You’ll be presented with an interface to upload 5 formats of the fonts & they are:

• 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.

It’s recommended to upload all the formats but you’re also good to go with only a handful of them (WOFF, WOOF2 & TTF)

Individually upload the font formats & then start adding some more font variations like Weight (100-900) & styles (italic) for the same font.

✍ Note: For each font variation, you’ll need to add/upload its font file individually. As of now, there’s no other way. Once you’re done with adding font variations, simply click on the publish button on the right-hand side.

Now, the custom font will be added inside the Elementor typography & it will be available for all Elementor widgets, be it the heading widget or accordion widget.

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.

Now, designing your landing pages using the custom fonts you desired will be a lot of fun.

Lastly, I recommend adding your custom font to global typography for better workflow.

Now here’s the solution for the users looking for how to add a custom font in the free version of Elementor…

How to Add Custom Fonts to Elementor Free Version?(Using a Plugin)

Well, that’s the thing when you’re on the free version of Elementor. Need a feature? Install a plugin. Another feature = another plugin.

That’s why all those WordPress YouTubers & I recommended using Elementor Pro.

Anyway, if you’re comfortable installing a plugin, the one you'll need to install is – Custom Fonts by Brainstorm Force. Simply go to the Plugins > Add New & simply type “custom fonts by brainstorm” in the search bar.

Also, this Custom Fonts plugin integrates well with Elementor & a few other page builders.

One more thing that I liked 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.

Installing custom fonts is pretty simple with this plugin.
With just a couple of steps & you’re all set.

Step 1: Once the custom fonts plugin is installed & activated, Go to Appearance > Custom fonts.

Step 2: Add Font Name, and a fallback font & then one by one, upload font formats (WOFF2, WOFF, TTF, EOT, SVG, OTF) for all the variations (explained above)

That’s it. You've successfully added custom fonts to your Elementor site for free.

Once custom fonts are added, you’ll get the same options under typography settings inside Elementor.

Now talking about font weights, I usually use font weights between 300-800 & sometimes 900 i.e black version also.

If you’re unaware of font name & their numeric values, do check the below-provided table bcoz I believe it will be helpful for you…

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

Resources to Get Webfonts that Look Modern & Elegant on Your Elementor Site

Just like wallpaper downloading sites, there are a ton of similar sites for downloading fonts.

To be honest, I haven’t used custom fonts on any of my Elementor websites as I’m fine with a combination of Montserrat & Mulish.

But at times, when I need custom fonts for Photoshop work, I usually go to these sites…

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

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

• Montserrat (Used throughout my site in heading tags)
• Mulish (Used throughout my site as body font)
• Nunito
• Spartan
• Josefin Sans
• Sofia Pro (Paid)
• Proxima Nova (Paid)
• Mont (Paid)
• Futura PT (Paid)

Bonus Tip: Instead of trying & testing different fonts, use popular font pairings & save your precious time.

Test your fonts even before using them on your site. font-pairing

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

In case you face any issues or need help, drop your query in the comments section & I’ll be glad to help you.

Which custom font you're willing to add? Do let me know in the comments below.

Lastly, I know you’re good at hitting the share buttons, especially the Facebook one 😉