If you’re looking for a way to enhance your website aesthetic, using Elementor custom fonts is a great way to do so.
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 fonts 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 add fonts to Elementor free and pro.
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 integrate Adobe Typekit fonts into Elementor – sync and use all the Typekit fonts within Elementor.
That said, it only offers support for five different custom font 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 fonts 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
- Font Squirrel
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.
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 both the methods 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 upload customized fonts.
Step 1: Add a Custom Font to Elementor
On your WordPress dashboard, go to Elementor > Custom Fonts > Add New to add a new custom font.
Enter the font family name. You can choose any custom name – here, we’re using Custom Font 1.
Step 2: Add a Font Variation and Upload the Fonts
Next, 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.
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.
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.
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.
Method 2: How to add Custom Fonts to Elementor for Free?
Adding custom fonts 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 use custom fonts in 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.
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.
Search for the Nexter theme and install it. Next, click on Install Nexter Extension and then Activate Plugin.
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.
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.
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.
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.
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 font 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.
With Elementor, you also have the flexibility to customize the font settings, including size, space, style, letter height, and more.
And that’s it. You can add any custom font to your Elementor website for free with the Nexter theme by following these five simple steps.
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 the entire list of 120+ Elementor Widgets Library from The Plus Addons
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.
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 is the font not working in Elementor?
If your custom font isn’t working on Elementor, 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.
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.