How to Add Custom Fonts in Elementor and Generating Font Pairs

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).

HeWdTb53imDMPjBcV AaIAEFdspbgYGsN2uRcY3UA MLFNtbpmu46ceKUj72yIxlVw3MlLTXREbhttJ hmh1GJdTILacfmt2de59iBGKeEgPvsIshJucVTNIAI0RRR8lBhRpOWvY

This will take you to the Custom Fonts page where you can click Add New to add a new font (00:29).

zLTVpAcHdVyi7MnlKqB2AahG4VmWQMvK wxv2bA4FZMos9fQKHUFmX8q P1W8AHaKEaq2HkEA9R5mYJhDmcIToYlqYefzjfQ2nKI8GEnnoerxvARkWZa2 tQI 8wBLmxo4s0 kfm

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. 

KSRDEWITo identify your font variation just pen up the font folder and double-click on each to see their names (01:21)

x4OQwr0jYvyrNYrdgVhwLXcZv51S mAMvn2ify7lK6L9wW0FvbEndpN8PdGebH3O9 Z fhtoA1xkBpZ1d4Vmh f35PLbxgpkKrMa6UIY90bl0Rea9ZgfLlFN5AjpYq3U Z4k6I

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.

NJjVQHVVtIzlxAiKo7H1u pk Uk4jmbwdCzDpNafXhZl72iqjSCArgwzn21G7 ZEQtu2ksmPlP66XpN5fHJdZEIrLqEav30 drNKG7OTs4bpofvoqC9bPsUUpV wajcLumeeZuSb
Adding Custom Fonts in Elementor
Elementor custom fonts uploader

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). 

KEpzlpQgCPmaG4xY7g0h55xFNGlw1mwrJxY2IJqRP4uVDHUqzF2P95qHOos Yiw7WTPBeC3k tVXl41XcBWEqLe7jwfirrO1PKMUrvD YYYUifeuCYiKD3o34RPaqG0QcbS2I8Ty

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

EXZs4 kn6 EPxT3IYdbIdydXH OQKuRpZVAGr0870I4Xnpaf3 XAq8L2A5erGILoHWvK7FyRX6emln02Qe DGwqhWBouazTK4LdAC01US

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)

1IHuxzjWUhauJPzOLvCSSeJuq50zVcd8Opa0cDf6wDt Xls CqHW3cO18kGE8pg7cbnL14mVCY7NkhhH2c741Yhqh9yi2U2qqY6WnCD2eQWWjRhDHQ7urX6POnf4FO AJ sBMiTb

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)

ZVqIzkYKL0asP9 bsbyyKwKhcwmBFVfmbhnKyaiWXL eny9LScncP1B7xD4bqhwpbGpCSZatv6CH nSE1jJ 57nycIrRowrMxm0t7Ff4XrZ9ejJOXrn2m 7T9E7uvjdPHYC63aHE

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)

njK73gLB1hFHdp4avZPbsbhoDx2AUICHEb y9PKr7yf0
BOG9mSUMQRta0goppYvEAMPYo7NuVMtArNRRBe8ZItX0mZ7cwyGIBcZ055yr2xvOUE1pKjB9Ses md Z eUhj7l7JMwm7AutIZRfFASx

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).

d5H6x2HuMKQxhqyghkHp CoKgwQiNcYW98ANXuV IKADevqbyLRarlE30TPHZN7mLSYyZhECaD60l4d9PbBaEuH9fjMmSo7AuLeSugYm37Ad4opKTgqrsuQkzHEnLsBSDSOLsUVb

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users