July Special Offer! Get UP TO 40% OFF - Limited Time Only!

How To Add Custom Fonts To Elementor Websites

How To Add Custom Fonts To Elementor Websites

Table of Contents

Every website owner wants their website to look the best and be so attractive that users should praise & thoroughly explore their website.

It is possible to make a website visually appealing in various ways, and one of them is to add creative fonts. Are you also thinking of adding creative custom fonts to your Elementor page?

If you’re wondering about this but don’t know how to create one, you do not need to worry.

In this blog, we will provide a complete guide on adding custom fonts to your WordPress website using Elementor.

So what are we waiting for? Let’s get started.

How to Add Custom Fonts to WordPress Using Elementor?

If you have used Elementor before, you would know how easy and effective it is. There are many features of Elementor through which you can give a stunning look to your website.

Along with these features, Elementor gives the flexibility to add Custom Fonts & customize their formats for your website.

Before proceeding, there are some default font formats supported by Elementor that you need to know.

Let us first discuss them in brief.

  • WOFF File: WOFF is Web Open Font format which is OpenType or TrueType fonts used by modern browsers.
  • WOFF2 File: This web font file is created in WOFF file in 2.0 format, which supports OpenType & TrueType fonts providing better compression than WOFF.
  • TTF File: A TTF file is a TrueType font format developed by Apple and used in macOS & Windows.
  • SVG File: SVG, which stands for Scalable Vector Graphics, is an XML-based vector image format. It is used for defining two-dimensional graphic file formats for the web.
  • EOT File: EOT is an Embedded Open Type file format that works on IE and is designed by Microsoft.

There are 2 ways to add custom fonts to your website:

  1. Using the Elementor Custom Fonts Feature
  2. Using a WordPress plugin

Method 1: Add Custom Fonts to WordPress using Elementor Custom Fonts Feature

To use the Elementor custom fonts feature, you need to upgrade to Elementor Pro.

The custom font feature was available in the Elementor Lite plan till a few years back, but after the upgrade, it was shifted to Pro users only.

Follow these steps to add custom fonts to your Elementor website:

  • Step 1: Open your WP Admin Dashboard, explore the sidebar and navigate to the Elementor > Custom Fonts.
Add custom fonts to your WordPress website using Elementor custom fonts feature
  • Step 2: As soon as you click on the Custom Fonts option, you’ll be redirected to Elementor’s custom fonts page, and there, you have to click on the “Add New” button.
Click to 'Add New' button on the custom fonts feature of the Elementor on your WP Admin Dashboard.

To add a new font, you must enter your font family name. Here we are naming it ‘Elementor font 1.’

Next, click the “Add Font Variation” button below the font title area.

Search for your newly added custom font in the Elementor editor page.
  • Step 3: Once you hit the font variation button, you’ll get the options to manage & customize your font files.
Manage and customize your font's weight, style and upload fonts variation using Elementor Custom Font feature.

You can manage your font files according to the font Weight, Style (normal, italic, & oblique), and Font Files like WOFF, WOFF2, TTF, SVG, and EOT.

  • Step 4: Download a free font or purchase one from the internet.

There are a lot of free & paid resources which offer awesome custom fonts compatible with WordPress and Elementor websites.

Where to Find Free Custom Fonts

You might be questioning where I can find the free custom fonts.

Many free websites offer free custom fonts, such as fonts.com, Google Fonts, Typekit, and more.

Make sure to check the website’s authenticity before downloading or purchasing a font.

  • Step 5: Once you’ve downloaded a font of your choice, you must upload the file in any of the five font variations available and hit the publish button.
Download and upload your custom font file using Elementor custom fonts feature.

However, for better results, we recommend you upload your font file in all five formats to let your content load smoothly in any system or browser.

Remember to not upload more than one font file at a time in all different variations; otherwise, it may slow down your page.

That's how you can upload your custom font file to WordPress website using Elementor's custom fonts feature.

And we’re done! Our font is now added to Elementor and is ready to be used.

  • Step 6: Open the Elementor editor page, and in the typography section, search for your newly created font, i.e., ‘Elementor font 1.’

Finally, the ‘Elementor font 1’ we’ve just added is ready to be used.

Method 2: Add Custom Fonts Using a WordPress Plugin

This method will be perfectly suitable for those using the Elementor lite version.

  • Step 1: Go to WP Admin Dashboard. On the admin sidebar, click on Plugins > Add New.
after installing a plugin, go to custom fonts option in the WP Admin area.
  • Step 2: Type ‘Custom Fonts,‘ hit the Install Now button, and activate the plugin.
Search for the 'Custom Fonts' plugin then install and activate it to add custom fonts on your WordPress website.
  • Step 3: Once you’ve activated the plugin, you’ll find an option, ‘custom fonts,’ underneath the Appearance feature; click on that option, and you’re good to go.
Explore custom fonts option listed in the sidebar of the WP Admin Dashboard.
  • Step 4: Now that you’ve reached the custom fonts section, enter the font name and a fallback font. Then finally, upload the font formats one by one for all variations, as explained in method 2.
Name the custom font you've aaded to your WordPress website plus upload the font file.
  • Step 5: Your new custom font file is successfully added and ready to be used. You can find the font in the typography option within the style tab on your Elementor editor page.

Customize your content using the newly added font on your website with Elementor free & custom fonts plugin. However, if you’re an experienced coder, you can easily create custom fonts for your website using Elementor.

So far, we’ve included all three methods you can follow to create your own custom font for your Elementor website via free and paid resources. Choose the one that suits your needs.

Next Read: How to Use Elementor

We hope you find this article helpful. If you face any difficulty following the steps mentioned in this article, please feel free to connect with us or drop your queries in the comment section. We’ll try our best to solve your queries.

If you’ve just started your journey with Elementor, this article, How to Use Elementor: Detailed Guide for Beginners, will be a perfect guide for you.

In case you’re searching for an all-in-one solution for your Elementor page builder, PowerPack Elementor Addons will be the best choice.

If you like this article, you can subscribe to our newsletter to receive amazing articles related to Elementor & WordPress.

Also, you can connect with us on these platforms: YouTube, Facebook, and Twitter.

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Purva Dewangan

Purva Dewangan

Purva is a WordPress Technical Content Writer at IdeaBox Creations. She's a designated technical writer in the technology and software domain. She loves bridging the frame of words in the world of content writing as well as fiction writing.

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.