fbpx
Download the User Profiles Worksheet A Dead-Simple Solution for Helping Clients Plan Their Priority Website Content
The Admin Bar

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

October 4, 2020

By: Dapo Babarinde

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.

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.

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

Join The Admin Bar Community
Tab Phone 3pt6
Black Icon 225Docket Wp Ml
Save Time, Improve Efficiency, & Make Fewer Mistakes
Learn More
Projecthuddle Light V2
A WordPress plugin for website & design feedback.
Learn More
Nurture Copy Logo Compressed (2)
Nurture better relationships through done-for-you email marketing
Learn More

More from The Bulletin Board

Book Recommendation

Recommended Reading

The best reads for web designers, agency owners, and freelancers.
Kyle Van Deusen
April 9, 2021
Sales

How To Sell Copywriting Services To Your Clients

How you can make a profit from outsourcing copywriting.
Abby Wood
April 8, 2021
Sales

Rethinking What it Means to "Sell"

Doing “sales” has always felt a bit gross to me. I’ve never considered myself terrible at it — but I...
Kyle Van Deusen
March 31, 2021
Processes

Creating “Burner” Email Addresses for Setting Up Client Accounts

Setting Up & Accessing Accounts for Clients is a Pain Through the process of developing websites or doing any kind...
Kyle Van Deusen
March 23, 2021
Sales

How to Sell Website Care Plans More Often

This article will help with a crucial challenge: getting people to actually take up a care plan.
Nick Gulic
March 23, 2021
General

A Friendly Reminder About Domains

This post was born from a horror story, but don't worry; there's a happy ending. It was only a few...
Matthew Sebert
March 22, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
Tab Phone 3pt6
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu