How to Add Custom Fonts To Elementor Free & Paid in 2024

By default, Elementor comes with thousands of pre-install fonts that you can use to style your website. You’ll find all the most popular fonts in Elementor’s font library, including Google Fonts.

But what if you want to use a specific font not available in Elementor’s library? That’s where adding custom fonts comes in handy.

Adding custom fonts gives you more control over your website’s design and gives it a unique touch. The Elementor Pro allows you to upload a custom font to your WordPress website.

But if you’re using the Free version of Elementor, you must use an additional free plugin to upload the custom font to your Elementor site.

In this tutorial, we’ll show you how to add custom fonts to both the paid and free versions of Elementor. So, let’s get started:

How to Add Custom Fonts To Elementor Pro Version

The pro version of Elementor allows you to upload custom fonts to your WordPress website. You’re welcome if you’re using the premium version of Elementor.

You don’t need to install additional plugins to upload your custom font.

Click on Custom Fonts

Firstly, you need to log in to your WordPress dashboard; then, you need to click on Elementor. After clicking on the Elementor, you’ll find Custom Fonts, and then click on it.

Add New Font

After clicking on the custom fonts, you’ll come to this page. After coming to this page, you need to provide your font name. But we provide the name of our website; you can use any name you want, then click Add Fonts Variation.

Then, you’ll find 5 different types of custom Font upload options. You can go with any of them that match your custom fonts.

After uploading the Custom fonts you must, you need to click on the Publish button. Now, let’s check our newly uploaded custom font from the Elementor page builder.

Image of Elementor Pro page Builder

After uploading your new custom font, when you open Elementor page builder, you’ll see your new custom font in the font list.

In this way, you can add your custom fonts to your WordPress site with the help of Elementor Pro.

How to Add Custom Fonts To Elementor Free Version

Now, this step is for Elementor free version user: if you’re using the free version of Elementor, you cannot upload custom fonts with their default features. To upload a custom font for Elementor, you need help from a WordPress plugin called Custom Fonts.

To install the Custom Fonts plugin, log in to your WordPress dashboard first. Then, hover on Plugins and click on Add New Plugin. After coming to the WordPress plugin directory, you must search for Custom Fonts by Brainstorm Force.

Custom Fonts

After finding the Custom Fonts plugin, you need to click on the Install Now button; after installing the plugin, you need to click the Active Now button.

Custom Font Setting

After finding the Custom Fonts plugin, you need to click on the Install Now button; after installing the plugin, you need to click the Active Now button.

Local Fonts

After clicking on the Add New Font button, you need to provide your Font name, and then you need to choose your Custom font under the Advanced Option. After uploading your custom font, you’ll see the preview on the right-hand side. And lastly, save the font.

Custom font on free version

After uploading your new custom font, the next time you open the Elementor page builder, you’ll find your new custom font on the font list.

In this way, you can upload your custom fonts to your WordPress site with the help of the Custom Fonts plugin for the free version of Elementor.

What is a Custom Fonts in Elementor

Custom Fonts in Elementor refers to the fonts that aren’t included in the default Elementor font library. These fonts are typically unique or specific styles that users add manually to their website design.

The use of custom fonts offers a wider range of design possibilities. Users can choose their typography to match their brand identity, thus giving their website a distinctive look.

Adding these fonts in Elementor Pro is straightforward, thanks to the built-in feature. However, Elementor Free users will require an additional plugin, such as the ‘Custom Fonts’ plugin, to add their preferred fonts.

Overall, custom fonts provide a broader scope of design flexibility. It allows users to fine-tune their website aesthetics precisely to their specifications.

Why You Should Use Custom Fonts in Elementor

Using custom fonts in Elementor can help differentiate your site from the competition. A unique typography ties your website design closely to your brand identity, making it more memorable to your visitors.

Secondly, custom fonts can enhance the overall user experience on your site. Good typography can improve readability, ensuring your content is easy to digest and your message is communicated.

Furthermore, using custom fonts can contribute to your website’s aesthetic appeal. It can add an artistic touch, enhancing your site visitors’ visual experience.

Lastly, with custom fonts, you have a wider variety of typography styles. This gives you more creative freedom in designing your website, enabling you to create a design that reflects your brand.

Conclusion

If you’re an Elementor user, this tutorial will help you add custom fonts to your WordPress website using the Pro and Free versions of Elementor.

Custom fonts allow you to add a unique touch to your website design, making it stand out. They also offer more design flexibility, contributing to a better user experience for your site visitors.

By reading this tutorial, you can upload a custom font on your Elementor page builder with their pro and even free plans. Watch our YouTube video tutorial, How to Add Custom Fonts To Elementor. If you prefer to avoid reading the article.

Thanks for your valuable time with us, and if you’ve any more questions about Elementor, let us know in the comment section. We’ll be happy to assist you further.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top