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 …

Published:

Filed Under:

Plugins

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

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

September 16th, 2022

Kevin Powell Talks WordPress!

What we can learn from a master front end developer

August 19th, 2022

Optimizing Live with Perfmatters

Get a behind-the-scenes look at how Brian uses Perfmatters on live websites!

July 8th, 2022

New TAB Site Teardown

How any why I rebuilt The Admin Bar website with GenerateBlocks (Featuring Dave Foy)
Vertical Banner

More Articles

navigations

Most (and Least) Popular Agency Website Navigation Items

Your navigation is arguably one of the most essential parts of your website… but is yours what your customer’s are expecting?

selective focus of human and robot hands typing on laptop at wor

How to write a blog post that ranks on Google (with some blogging freebies!)

My best tips and techniques of the trade to make sure that your next blog post (whether lovingly-handcrafted or AI-based) is built to convert (and rank on Google). 

Post Feat Im

Performance Implications of GenerateBlocks New Features

I put the new accordion and tabs blocks from GenerateBlocks to the test to find out how they will impact your website’s performance.