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.

See How My Personalized Services Can Drive More Business to Your Website

  • Speed Optimization – get peak performance & blazing speed.
  • Elementor SEO – higher rankings bringing the right audience.
  • Website Design – stunning representation of your business.
  • Landing Page Design – convert visitors into customers.

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 for Adding Custom Fonts to the 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.

Go to Custom Fonts under Elementor
Click on 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.

Also Read: How to set elementor landing page as website homepage

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…

Adding 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…

A Table to Understand Common Font Weight Name Mapping

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

ValueCommon Weight Name
200Extra Light
400Normal (Regular)
600Semi Bold
800Extra Bold
900Black (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…

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

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 😉

Was it Helpful? Give it a Share
creating a new website?

Get started quickly with my
FREE WordPress Setup Service

want me to create your site?

Explore my Personalized
WordPress & Elementor Services


    1. First of all, I’m sorry for my tardy response.
      I just did a bit of research & found out there are some sites offering it for free but with a non-commercial license.

      If you’re ok with that, you can consider those sites & if you ask me, then I’d advise using google fonts.


Leave a Reply

Your email address will not be published. Required fields are marked *