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 …

Dapo Babarinde

Published:

Filed Under:

Plugins

Dapo Babarinde

Dapo Babarinde

Ascend WP

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.

Abstract Cityscape Blurred Background. Hong Kong
This content contains affiliate links. View our affiliate disclaimer.

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, Da Font, FFonts, Fonts Arena.

Share This Article!
Dapo Babarinde

Dapo Babarinde

Ascend WP

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.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

July 12th, 2024

Vitality – Part 2: Largest Contentful Paint (LCP)

With Google's ever-evolving standards, mastering these metrics is not just nice-to-have, it's critical for every developer who wants a website that performs.

June 14th, 2024

Vitality – Part 1: Time to First Byte (TTFB)

With Google's ever-evolving standards, mastering these metrics is not just nice-to-have, it's critical for every developer who wants a website that performs.

May 24th, 2024

Mastering SMTP

This webinar has been carefully designed to turn the complex subject of WordPress email delivery into clear, actionable steps — specifically for the freelancer and agency owner delivering these services to clients.

More Articles

Stop Keyboard

Give It to Me Straight: Words to Avoid in Email for Better Communication

Want to communicate more directly & confidently – without sounding rude? Discover the top words & phrases to avoid in your emails, while still being polite.

5 Tips & Tools To Improve Your Typography B Log

Boost Responsiveness, Balance, & Accessibility with These Top Typography Tips!

Learn how just a few simple tools and tips can drastically improve your designs!

Ttfb

Understanding and Improving Time to First Byte (TTFB)

Learn how to improve Time to First Byte (TTFB) and boost your website’s speed with practical tips and strategies.