Adding custom fonts in elementor has never been easier. And in today’s tutorial, I’ll also show you websites to download free custom fonts, upload and use those custom fonts in elementor website and a cool tool to use and generate font pairs which makes your work even easier when it comes to selecting which fonts to use where.
In less than 4 clicks you’ll be able to add a font of your choice with variations and be able to use them on your elementor website with ease.
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
Adding a Customs Font in Elementor
To kick this off; in your dashboard go to Elementor and 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 where you can download fonts, like dafonts.com, 1001fonts.com and you can also search and download fonts from Google fonts and Adobe Typekit.
I’m going to use this font called whiskey girls from dafonts.com platform. You can also download this or any other font of your choice 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 in your add new font page, enter the name of your new font, 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 for example TTF, WOFF, SVG etc. Our 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 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 Style; oblique. Click the Update button, and now you can see your custom fonts uploaded. (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 Style. 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 lower case 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, go to Style and under Typography search for whiskey girls and select 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. (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.
