Curious to find out what the Oxygen Builder is all about? Register for our free webinar and find out!

How to upload and use custom fonts on Elementor (Tutorial)

Have you ever suddenly got tired of using Google fonts on website projects? It has happened to me once; I had just started work on the design of a website to be built with Elementor. I picked a font to use, but then I thought to myself; why do I have to pick one of the regular fonts?

You know that quote about how variety is the spice of life. I had gotten tired of common typefaces like Arial, Helvetica, Open Sans and others, so I decided to use a unique font that is different from what Google font offers; a custom font.

Yes, Elementor does have prebuilt 800+ Google fonts to choose from, but as much as that number seems, they just aren’t enough. So, you might want to upload a custom font that is not available on Google Fonts.

Whether it is for aesthetic purposes, or at client’s request, or maybe you want to stand out and grab instant attention from website visitors, using custom fonts creates that extra branded professional style and brings a unique experience to users.

So, how do you add custom fonts to Elementor? That’s exactly what we’ll see here.

First, here are some things you need-to-know:

Elementor Custom Font feature is only available on the Elementor Pro version

Elementor has made it easy to add a custom font to your website and this feature works only if you have Elementor pro (I am going to show you how to do it in a couple of seconds). However, for the Elementor free version users, a plugin like Custom Fonts enables you to upload your own font.

There are different font formats

Custom fonts should be uploaded to WordPress websites in a standard format, this will enable visitors to the website see them on various web browsers.

The font formats that are compatible with Elementor include:

The Web Open Font Format (WOFF)

The Web Open Font Format (WOFF 2.0)

TrueType Fonts (TTF)

SVG Fonts/Shapes

Embedded OpenType Fonts (EOT)

If you don’t have your font available in all the file formats, you can use a site like Online Font Converter to convert to all the formats you need.

Fonts also comes in different weights and styles

Before uploading a custom font, you need to have it downloaded and saved in a file on your computer. There are websites where you can download custom fonts both free and paid, examples include dafonts and Fontsquirrel (get more information about sources to get custom fonts at the end of the article).

Make sure you download the fonts in Web Open Font Format (.woff), OpenType Font format (.otf) or TrueType Font file format (.ttf). Fonts in these formats are supported across all browsers. After downloading the font folder to your computer unzip it to extract the font file.

How to Upload Custom Fonts

Here are the steps you need to follow to upload custom fonts to your website;

Step 1: To begin with, go to the WordPress dashboard, under Elementor > Custom Fonts, and then click Add New

Step 2: Next, give your font a name and click Add Font Variation

Step 3: Choose a Font Weight. Some custom fonts might not support all weights so you have to choose only the weights that are available for the fonts.

Step 4: Then, Select a Style and click Publish

Note: Be sure to repeat the steps above for every font weight variation

Pretty simple right?

Now, let’s see how you can view your custom fonts.

Your newly added custom font will appear on the style tab when editing text with Elementor.

Step 1: Go to the STYLE TAB

Step 2: Under Typography>Family and voila, your new Custom Font is right there.

If you are using Adobe Fonts (TypeKit), this is how you upload your TypeKit to Elementor:

Under Elementor > Settings > Integrations add your Adobe Fonts (TypeKit) Project ID.

Click Get Project ID

That’s how easy it is.

By following the steps above you can easily upload and use custom fonts on your website. So go grab your custom font, upload on your website and give your users a unique feel when they visit your website.

Bonus: Where to Find Custom Fonts

Here are some examples of websites where you can download a variety of custom fonts both free and premium.

Font Squirrel, 1001 Fonts, Urban Fonts, Fontspace, Fontspring, Befonts, Abstract Fonts, Da Font, FFonts, Fonts Arena.

118691738 3437612449622491 2306575997790396748 N

Dapo Babarinde

Dapo is a website designer and agency owner. He runs AscendWP, a whitelabel WordPress development service that helps digital agencies scale their web design service. His favorite moments are when projects are completed and clients are happy or when he’s listening to the latest Afrobeats music.

Black Icon 225
Docket Wp Ml
Save Time, Improve Efficiency, & Make Fewer Mistakes
Nurture Copy Logo Compressed (2)
Nurture better relationships through done-for-you email marketing
Projecthuddle Light V2
A WordPress plugin for website & design feedback.
Funnel Packs Purple New (1)
Pre-built marketing funnels that generate leads for your agency and save you time

More from The Bulletin Board


The Most Effective Way for Agencies to Grow Recurring Revenue

The Website Owner’s Manual (a.k.a. ‘The WOM’) negotiates, persuades, and sells all in one go.

james rose WOM review
website owners manual saves care plan

A New Season of Happy Hour Begins!

Join us for our monthly live virtual hangout and spend some time with like-minded folks who want to help each other succeed.

Notification Bubble