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

February 20th, 2024

Making Sense of Security

Going beyond the marketing hype to make informed decisions on security!

January 26th, 2024

Effective Spam Defense for WordPress Forms

Conquer form spam in WordPress with Mark Westguard on Jan 26th. Learn key spam-fighting tactics in our live, interactive session. Register now to transform your forms!

More Articles

Privacy By Design

Are your websites designed with privacy in mind? Privacy By Design

Incorporating Privacy by Design in web development not only aligns with legal requirements and avoids hefty fines but also serves as a competitive advantage by enhancing client trust and consumer privacy awareness.

Process

No More Headaches: Streamline Your Business Processes in 7 Simple Steps

Are your internal business processes a source of too many headaches in an already busy schedule? Learn how to streamline your processes right here.

Cookie

Google Tightens Privacy Rules: Preparing Your Website for Consent Mode V2

What web agencies need to know about Google’s Consent Mode V2