Here’s an Easy way to Add Custom Fonts to Elementor Free & pro version + A Few Tips on where to Get them

How-to-Add-Custom-Fonts-to-Elementor-Pro-and-Free

Disclosure: My blog is reader-supported. Some of the links on this page may contain affiliate links. If you decide to purchase from my affiliate links, I’ll be thankful to you.

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 a whole new level.

In this short tutorial, I’ll share how you can add custom fonts to both Elementor pro & the free version.

Also, at the end of this post, I’ve shared some of the resources from where you can get premium fonts.

That being said, let’s dive in & get the custom fonts inside our Elementor website.

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, I’ve also shown the method to add custom fonts for the 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.

Get Elementor Pro here

How to Add 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.

Elementor-Custom-Fonts-Settings
Go to Custom Fonts under Elementor
Click-on-add-new-to-add-custom-fonts
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.
Upload-Custom-Font-to-Elementor

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. 

Just note that for each font variation, you’ll need to do 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 heading or accordion.

Step 3: Well step 3 is just to open the Elementor editor & do the styling stuff. 

As I mentioned, you’ll get to select your custom font under typography settings.

Custom-Font-Successfully-Added-inside-Elementor

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

Now here’s the solution for the Elementor users with the Free version…

Adding Custom Fonts to Elementor Free Version using a Plugin


Well, that’s the thing when you’re on the free version of Elementor. If you need a feature, install a plugin. Another feature = another plugin.

That’s why I recommended using Elementor Pro.

Anyway, if you’re comfortable installing a ton of plugins, the one you'll need to install is – Custom Fonts by Brainstorm Force

Custom-Font-Plugin-Brainstorm-Force

Here are some of the reviews I liked that may encourage you to use this one 😄

Custom-Fonts-Plugin-Reviews

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

One thing that I like about this plugin is works throughout WordPress. Meaning, it will continue working even you uninstall your page builder be it Elementor or Beaver builder.

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

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

Custom-Fonts-Plugin-Settings

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

Upload-Custom-Fonts-using-Plugin

That’s it.

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

Talking about font weights, I personally use font weights between 300-800 & sometimes 900 i.e black version also.

If you’re unaware of font name & their numeric values, the below-provided table 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
100Thin
200Extra Light
300Light
400Normal (Regular)
500Medium
600Semi Bold
700Bold
800Extra Bold
900Black (Heavy)

Source: Mozilla Dev

Where to Get Webfonts that look Modern & Elegant


Premium-Font-Sofia-Pro

Just like wallpaper downloading sites, there are a ton of similar sites for downloading fonts. I personally haven’t used custom fonts on any of my Elementor websites as I’m fine with Montserrat & Mulish.

But at times, I do need custom fonts for photoshop work & I usually go to these places to find them:

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

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. Let me know which is your favorite font?

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

Further Reading:

Give it a Share
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Leave a Reply

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