Disclosure: My blog is reader-supported. Some of the links on this page may contain affiliate links. Learn more
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 short tutorial, 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 resources from which you can get premium fonts (free & paid) for your elementor website.
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 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.
Get Elementor Pro here
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.
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.
Just note that 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.
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…
A Simple 2 Step Guide 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.
Here are some of the reviews (I liked) that may encourage you to use this plugin 😄
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. 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, 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:
|Value||Common Weight Name|
Source: Mozilla Dev
Where to Get Webfonts that look Modern & Elegant for 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, 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:
- Josefin Sans
- Sofia Pro (Paid)
- Proxima Nova (Paid)
- Mont (Paid)
- Futura PT (Paid)
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, especially the Facebook one 😉
- How to Design your WordPress website like a Pro
- Elementor Canvas vs Elementor Full-width, which layout you should choose?