Adding custom fonts in Elementor has never been easier!
In this tutorial, I’ll show you how to download free custom fonts and upload and use them on your Elementor website.
And show you a cool tool to generate font pairs, making your work even easier when selecting the right fonts.
All you need to do to add fonts to Elementor is download your preferred font and upload it under Elementor > Custom Fonts > Add New.
Let’s get right to it.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Custom Fonts in Elementor Tutorial
how to add font to Elementor page builder
To add font to Elementor go to your WordPress dashboard and under Elementor click on the Custom Fonts option (00:27).
This will take you to the Custom Fonts page where you can click Add New to add a new font (00:29).
Downloading Free Custom Fonts
There are a variety of platforms like dafonts.com, 1001fonts.com, Google Fonts and Adobe Typekit fonts sites that you can also search and download fonts from.
I’m going to use this font called Whiskey Girls from the dafonts.com platform.
You can also download this or any other font from one of those platforms.
To Read: 4 Ways To Create an Elementor Image Accordion with Premium Addons
Uploading fonts to Elementor
After you download your font(s), back to your Add New Font page, enter the name of your new font, and click the Add Font Variation button (01:17).
This is where you choose what variation of your font you want to use.
There are various font extensions/font formats for example TTF, WOFF, SVG fonts, etc.
Whiskey Girls font is in .ttf so you click the upload button and then in the Library, upload the font you downloaded.
When you’re done uploading your font click the Publish button on the right, then you’ll be given a preview of the font you just uploaded (02:22).
Click to add another variation, go to the .ttf file format and click Upload.
In the Library select another variation and click open, then select it and it’ll show up.
Leave the font Weight and Style options on Normal.
I’ll add a third variation and this time choose the italic file, select and upload it.
Under the Weight option, change to 500 and font Style; oblique.
Click the Update button, and now you can see your custom fonts uploaded in Elementor fonts. (03:15)
To Read: Create an Elementor Custom Mouse Cursor using Text, Icons, Images or Lottie Animation
Using Custom Fonts in Elementor
When you go to your Elementor and select any text widget, for example, select a heading, in the Edit Heading area on the left go to the Style tab.
Under Typography search for the Whiskey Girls font and you’ll notice it is under custom fonts (03:34)
Depending on the type of custom font you uploaded, you may or may not be able to change the weight, transform, style and other settings in your font. (03:55)
In the case of the Whiskey Girls font for example; you can’t transform it to lowercase because it’s only in uppercase by default.
However, you can change the style because you uploaded both the normal and oblique styles.
You can also make some other changes like the color and size of the font.
If you want to apply your custom font to other sections you can do so by selecting the widget, going to Style and under Typography searching for Whiskey Girls and selecting it.
You can change the color to your preference.
Another way to apply the font to other widgets is to right-click that previously edited widget and select copy style then go to the next widget and paste style. (04:46)
You can apply these changes to all the sections on your website by copying and pasting the style.
And you can also use the same process to add another custom font and apply it in different sections on your site, you’re not limited to only one custom font.
Also Read: How to Create an Elementor Vertical Scroll Section with Premium Addons
Generating Font Pairs (Font Pairing)
The next part I want to show you is how to pair fonts.
For this, I’m going to share with you an interesting tool called Font Joy.
Fontjoy.com is a free website you can access to generate font pairs to use for your heading, titles and content (06:38).
This website saves you the time you would have spent looking for different fonts that can work together on your website.
All you have to do is click Generate, and you’ll get awesome font pairs in a blink to add to Elementor (07:27).
I hope you found this article helpful in showing you where to download free fonts, how to add them to your Elementor website and how to generate font pairs.
For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and YouTube channel for tips and tutorials.
