How to Add Custom Fonts to Elementor [Easy Guide]

Updated on October 9, 2024 by Editorial Team

If you want to add custom fonts to Elementor, then you’re at the right spot!

Your website’s typography and font style are some of the most important – and often overlooked – aspects of designing a visually attractive and engaging website.

In addition to 800+ Google fonts for your website, Elementor allows you to add custom fonts to experiment with new styles.

These custom fonts help make your website more attractive and also help boost user engagement, improve readability, and establish a unique image for your brand.

The best part? Adding custom typography on Elementor is an extremely easy and simple process.

In this guide, we’ll take you through the step-by-step process of how to upload fonts to Elementor free and pro.

Let’s begin!

Table Of Content

What are Custom Fonts in Elementor?

Custom fonts in Elementor allow you to add self-hosted and Adobe fonts on your Elementor page builder and use them for your website content.

Elementor custom fonts offer an easy way to upload any fonts you want, as well as modify the characteristics of your fonts to create branded font styles for your website.

Moreover, you can also add Adobe fonts to Elementor by integrating Adobe Typekit – sync and use all the Typekit fonts within Elementor.

That said, it only offers support for five different custom font Elementor formats as below-

  • The Web Open Font Format (WOFF): It is one of the most popular and highly recommended font formats supported by most modern browsers.
  • The Web Open Font Format (WOFF 2.0): This file supports OpenType and TrueType fonts and offers better compression than WOFF.
  • SVG Fonts: SVG or Scalable Vector Graphics is an XML-based vector image format that is used for defining 2D graphic file formats. This format helps easily display SVG glyphs in text, which is especially useful for older versions of the iPhone.
  • TrueType Fonts (TTF): It is a font format developed by Microsoft and Apple in the 1980s.
  • Embedded OpenType Fonts (EOT): This format supports IE and is designed by Microsoft.

Where do you Download Free Custom Fonts for Elementor?

If you want to add custom typography to Elementor, you can use professionally-designed, premium fonts.

There are plenty of websites available that let you download stunning custom fonts for free, such as

  • Google Fonts
  • DaFont
  • Font Squirrel
  • Urbanfonts
  • FontSpace

All you need to do to download these custom fonts for your website is to hit Download on the font you like, unzip the folder, and select the suitable font format.

You will have the font ready for upload on WordPress.

Struggling to choose the perfect fonts for your brand? Explore the top 20 Elementor fonts to find the right style for your website.

How to Add Custom Fonts to Elementor [Step-by-Step Methods]

Whether you’re using the free or premium versions of the Elementor, you can easily use custom fonts for your website.

However, the built-in custom fonts feature in Elementor works only for Elementor Pro, and to use custom fonts in the free version, you can use a WordPress plugin or install the Nexter theme.

Let’s go through the methods on how to add font in WordPress Elementor in detail.

Method 1: How to add Custom Fonts to Elementor Pro?

If you’re using Elementor Pro for your website, you have the custom fonts feature built-in.

Here’s how you can activate it and add custom font to Elementor.

Step 1: Add a Custom Font to Elementor

To add custom font to Elementor, go to your WordPress dashboard, and click on Elementor > Custom Fonts > Add New to add a new custom font.

Add a custom font to elementor how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Enter the font family name. You can choose any custom name – here, we’re using Custom Font 1.

Custom font 1 how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Step 2: Add a Font Variation and Upload the Fonts

Next, you would ask how to add font family in WordPress Elementor?

Its easy, click on Add Font Variation to upload your font files and add different variations.

Here, add the font name and upload the font files for different supported formats – WOFF, WOFF2, TTF, SVG, and EOT.

You can download different fonts from various font directories available online.

Add new fonts 1 how to add custom fonts to elementor [easy guide] from the plus addons for elementor

It is recommended to use as many font formats as possible to support a wide range of browsers and create an engaging website experience for all your visitors.

Upload fonts how to add custom fonts to elementor [easy guide] from the plus addons for elementor

You can also add font variations to a single font by customizing the weight and style of the font.

For all the font formats and variations you’re adding, upload the respective font files individually.

Add new fonts how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Step 3: Publish the Final Font

Once you’ve uploaded the font file from your media gallery, hit the Publish button.

The font will now be available for use in Elementor.

Step 4: Use the Custom Font on Your Elementor Website

On the Elementor page builder, navigate to the Style section for any text widget. Under Typography settings, select the Elementor custom font you’ve uploaded.

Now, you can explore the other Typography options to customize the font size, style, weight, decoration, and more to align it with your website design.

Use custom fonts how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Method 2: How to add Custom Fonts to Elementor for Free?

Adding custom typography to the free version of Elementor takes a little work as it does not offer the custom font feature for free, and you cannot import them as with Google Fonts.

To upload font to Elementor, you need a plugin or a WordPress theme that supports custom font files.

Fortunately, The Nexter Theme by POSIMYTH Innovations includes a custom font feature.

Nexter theme how to add custom fonts to elementor [easy guide] from the plus addons for elementor

It is a lightweight theme for your website with various unique features like header and footer builder, advanced theme builder, code snippets, and a custom font upload option.

What’s more, it seamlessly integrates with your Elementor page builder, allowing you to use these custom fonts effortlessly.

Here’s how to add custom fonts to Elementor with the Nexter extension.

Step 1: Install the Nexter Theme and Extension

To use custom fonts, you need to install the Nexter theme and extension for free from the WordPress library.

Go to your WordPress dashboard and navigate Appearance > Theme > Add New.

Install and activate the nexter theme how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Search for the Nexter theme and install it. Next, click on Install Nexter Extension and then Activate Plugin.

Install nexter how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Step 2: Enable the Custom Font Feature from the Settings

Once the theme is activated, go to Appearance > Nexter Settings > Extra Options on your WordPress dashboard.

Here, look for the Custom Font Upload option and enable it.

Custom font upload how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Step 3: Download Your Custom Font Files

In this step, you must source the custom font files from any free font catalog website like dafont.com.

Dafont.com features an extensive collection of beautiful fonts you can download for your website for free.

Surf the website to find a font that aligns with your design and brand image; hit Download and a zip file will be downloaded to your system.

Summer dreams sans how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Step 4: Upload the Custom Font on WordPress

Head to the Nexter Settings page and click the settings icon under the Custom Font Upload option to import your font.

You can upload a single font file at a time with the Simple Font Upload or multiple variations of your font, like bold, italic, or semi-bold, together with the Variable Font Upload option.

Custom fontss how to add custom fonts to elementor [easy guide] from the plus addons for elementor

Here, click on simple font upload. Enter the font name, upload the font file from your system, select the variation, and click on Save Font.

Save fonts how to add custom fonts to elementor [easy guide] from the plus addons for elementor

This will add the custom font to your WordPress, which you can use on your Elementor website.

Step 5: Use Custom Font on Your Website

To use the custom typography for your website, head to the Elementor page you’re editing. Navigate to Style > Typography.

Pick the custom font you added earlier to use for your website content.

Use custom font on your website how to add custom fonts to elementor [easy guide] from the plus addons for elementor

With Elementor, you also have the flexibility to customize the font settings, including size, space, style, letter height, and more.

And that’s it. Now you know how to add a font to Elementor website for free with the Nexter theme by following these five simple steps.

Also Read: Searching for an Elementor theme optimized for speed, performance, and responsiveness? Explore the 5 Best Elementor Themes with Speed Test for a high-quality website.

Wrapping Up

As you can see, adding and using custom fonts on Elementor is quick and simple.

With Elementor Pro, you can use the built-in custom fonts feature to add new fonts to your website.

Or, if you’re using the free version, download and install the Nexter Theme for free to use its custom font functionality and add interactive fonts.

This highly responsive theme makes it easier to upload custom fonts and customize them to match your brand image. Just follow the simple steps mentioned in this article to make your website content stand out with stunning fonts.

And if you’re looking to enhance the functionality of your Elementor page builder, check out The Plus Addons for Elementor – a complete toolkit featuring 120+ unique addons for Elementor.

Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

This is an all-in-one plugin with many excellent functions to customize website design, create listings, build a WooCommerce store, and more.

Unlock numerous impressive features with the premium version for just $39/year. You can also check out the lifetime plan if you wish to pay once.

20 checklist for wordpress site maintenance how to add custom fonts to elementor [easy guide] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​



    FAQs on Elementor Custom Fonts

    How do I add custom fonts to Elementor?

    If you’re using Elementor Pro, you can use the built-in custom fonts feature to add custom fonts. For this, add a new font, add the font variation, and upload your font in any of the supported formats. For the free version, you can install the Nexter theme and use its custom font option to add unique custom fonts to Elementor for free.

    Why are Elementor custom typography not working?

    If your Elementor custom font not working, it could be due to various reasons such as unavailable font-weight, invalid custom code, caching issues, HTTP/HTTPS mismatch in the URL, or not uploading all the font variations.

    Can I use Google Fonts in Elementor?

    Yes, Elementor features Google Fonts in its core that you can download from their library and use on your website.

    How to add a font to WordPress without a Plugin?

    You can easily add a font to WordPress without a plugin if you have a theme that offers this feature. For instance, the Nexter Theme is an interactive theme that lets you upload custom fonts for free. 

    How to manually add a font to WordPress?

    To manually add a font to WordPress, go to Elementor > Custom Fonts on your WordPress dashboard. Click on Add New, add the Font Variation, and upload font files for the different supported formats. This will add a custom font to your WordPress. However, this feature works with the premium version of Elementor.

    How do I upload font files to Elementor?

    To upload font files to Elementor, go to Elementor > Custom Fonts > Add New on your WordPress dashboard. Here, enter the font name and upload any downloaded font file in WOFF, WOFF2, EOT, SVG, or TTF versions. You can even add OTF font to Elementor.

    What types of font files does Elementor support?

    Elementor offers support for five font files, including The Web Open Font Format (WOFF), The Web Open Font Format (WOFF2), True Type Fonts (TTF), SVG Fonts, and Embedded OpenType Fonts (EOT).

    Can I add multiple font variations to Elementor?

    Yes, you can upload multiple font variations to Elementor. Follow the steps in this article for each font variation, and use many interactive fonts for your website.

    How to change the font in Elementor?

    You can change your website fonts in Elementor under the Style tab in the Elementor Block Settings. Under typography, you can choose from the various default and custom font families for your website content.

    Related Blogs