How to Add Custom Fonts in Elementor Free | 3 Step Guide Using a Plugin|(2025 update)

Learn how to add custom fonts in Elementor Free using a plugin in just 3 simple steps. Improve design, branding & site speed with our 2025 updated guide.

Customized fonts could be an exquisite way to stand out from the crowd. It will help you build your brand awareness and help your audience distinguish you from others. But what if you have the same fonts available all around? No more worries, as Elementor is here to help you out. But what if you need a pro version of Elementor and are wondering how to add custom fonts in Elementor for free?

Introduction

Typography plays a crucial role in web design, influencing not only how your content looks but also how users interact with your website. Elementor Free offers a wide range of fonts, but what if you want to use a custom font that matches your brand identity? The good news is—you don’t need Elementor Pro for that. In this guide, you’ll learn how to add custom fonts in Elementor Free using a plugin with a simple, step-by-step process.

Here we have a detailed step-by-step guide on how to add customized fonts in Elementor for free. All you need to do is stick with us till the end. So, let’s find out together.

Where to Find Custom Fonts

Here are some top websites where you can find custom fonts:

• Font Squirrel: Offers a large collection of high-quality fonts free for commercial use, plus a font identifier tool to match fonts from images.
• Google Fonts: A vast directory of open-source fonts optimized for web and mobile interfaces, widely used for modern website design.
• FontSpace: Provides over 64,000 legally licensed free fonts for personal and commercial projects, with extensive categories and preview options.
• 1001 Fonts: Features more than 90,000 free fonts with various licenses, allowing direct downloads for Mac, Windows, and Linux.
• MyFonts: A large marketplace offering professionally designed fonts for purchase with a wide variety of styles and licenses.
• FontFabric: A digital type foundry specializing in premium custom fonts and calligraphy for branding and design projects.

These platforms are excellent for discovering unique custom fonts tailored to different design needs, from web projects to print branding.

Font Weights and Styles

Font Weight refers to the thickness or heaviness of the characters in a typeface. It ranges from very light (thin) to very heavy (bold or black). Common weights include light, regular, medium, bold, and extra-bold. Designers use different font weights to create contrast and hierarchy in text, highlighting important information and improving readability.

Font Style refers to the posture or slant of the text. The most common styles are regular (roman), italic, and oblique. Italics slant the letters to the right and are used for emphasis or differentiation, such as for quotes or titles.

Together, font weights and styles provide versatility within a typeface family, enabling designers to establish clear structure, visual flow, and expression in their layouts.

In CSS, font weights can be specified using keywords (e.g., normal, bold) or numeric values from 100 (lightest) to 900 (heaviest). Styles like italic are set separately.

Using font weights and styles effectively enhances legibility, accessibility, and overall design aesthetics in both print and web.

Can You Add Custom Fonts in Elementor for Free?

WordPress has over 800+ built-in fonts, but they are all the same, which anybody can use. These WordPress fonts could be more helpful when you are looking to create your unique brand look. Don’t worry; Elementor has your back. The main reason for the likeliness of Elementor is the customizations and open environments for the users. You can edit your site completely and even change the custom colour for links, etc It doesn’t matter whether you have a paid or free version; you can add custom fonts in WordPress using Elementor. This will help you to grab the ultimate benefits of different fonts, styles, sizes, and variations in your WordPress site.

So, without further ado, let’s find out how to customize fonts in Elementor for free.

How to Add Custom Fonts in WordPress Elementor Free?

If you have a Pro version of Elementor, it will be much easier to add custom fonts in Elementor. But if you don’t have it, you can still do this with the help of a plugin.

Simply stating, if you are using a pro version of Elementor, you can achieve multiple functions, but if you don’t need to access every other pro feature, you must install a plugin. That’s why we recommend using the pro version. But if installing and using a plugin is something you are comfortable with, then you can do this.

Let’s find out which plugin you need and how to add custom fonts with its help.

(Step 1): Install and activate the plugin:

• Log in to Your WordPress Dashboard:
• Use your website’s admin URL (usually something like yoursite.com/wp-admin).
• Enter your username and password to access the backend.
• Navigate to the Plugins Section:
• On the left-hand sidebar, locate and click on Plugins.
• Then select Add New to open the plugin installation page.
• Search for the Custom Fonts Plugin:
• In the search bar on the right, type “Custom Fonts”.
• Look for a popular and trusted plugin like “Custom Fonts” by Brainstorm Force, or “Use Any Font,” which are widely used for uploading fonts locally.
• Install the Plugin:
• Once you find the plugin, click the blue Install Now button.
• WordPress will download and install the plugin files on your server.
• Activate the Plugin:
• After installation, the Install Now button changes to Activate.
• Click Activate to enable the plugin on your WordPress site.
• You will usually see a confirmation message that the plugin is activated.
• Plugin Configuration Page:
• After activation, most plugins will add a new menu item in your dashboard (for example, Appearance > Custom Fonts).
• You can now access the plugin’s settings and features to upload and manage your custom fonts.
• Check Compatibility:
• Ensure your WordPress, Elementor, and other essential plugins are updated to avoid conflicts.
• If there are issues installing from the dashboard, you can also download the plugin .zip file from the WordPress.org repository and upload it manually via the Upload Plugin button.

This step is essential to enable the feature of uploading and managing custom fonts locally so that you can use them later in Elementor, especially in the free version, where native custom font support is limited.

Adding custom fonts in WordPress with the help of Elementor is easy. With the use of this plugin, you could add custom fonts in Elementor Free in just 2 more quick steps.

(Step 2): Upload Your Custom Font

• After installing and activating the Custom Fonts plugin in WordPress, go to your WordPress dashboard.
• Navigate to Appearance > Custom Fonts (this menu appears once the plugin is active).
• Click on the Add New Font button to start uploading your custom font.
• Enter a clear, recognizable name for your font in the “Font Family Name” field, for example, “My Custom Font”. This is the name that will appear in Elementor later.
• Under the Local Fonts or Self-Hosted Fonts tab (the exact name may vary by plugin), click Choose File or Upload Files and select your font file(s) from your computer.
• The best font format to upload is .ttf (TrueType Font), but most plugins also support other formats such as .woff, .woff2, .svg, and .eot for better browser compatibility.
• You can upload multiple font files to include different font weights (like Regular, Bold, Italic). Some plugins allow you to add these variations for better control over typography.
• After uploading the font files and naming your font, click the Save Font or Publish button to complete the process.
• The uploaded custom font is now ready to be used in Elementor — it will appear in the font family dropdown wherever typography options are available.

Important Notes:

• If you encounter an upload error due to file type restrictions, consider contacting your host or enabling necessary permissions.
• Uploading multiple font formats ensures your fonts display correctly across all browsers.
• Plugins like “Custom Fonts” by Brainstorm Force and “Use Any Font” also automatically convert your files to optimized formats like WOFF2.
• Ensure that you own the font license or have permission to self-host the font files.

This step ensures your custom font is locally hosted, improving website loading speed and compliance with privacy regulations instead of relying on external font services.

(Step 3): Add custom font in Elementor:

• Open the Elementor Editor:
• From your WordPress dashboard, navigate to the page or post where you want to apply the custom font.
• Click Edit with Elementor to launch the Elementor visual editor.
• Select the Widget to Customize:
• In the Elementor editor, select any widget that contains text you want to style, such as Heading, Text Editor, Button, or Nav Menu.
• Click on the widget to open its settings panel on the left sidebar.
• Access Typography Settings:
• In the widget’s settings panel, go to the Style tab.
• Under Style, find the Typography section where font properties such as font family, size, weight, line height, and letter spacing can be adjusted.
• Choose Your Custom Font:
• Click on the font family dropdown menu within Typography.
• Scroll through the list or type the name of your custom font (the name you gave when uploading the font in Step 2).
• Select your custom font from the list. It will now be applied to the selected widget’s text.
• Adjust Additional Styling:
• After selecting your custom font, adjust size, weight, style, and letter spacing as desired to fit your design.
• Elementor will instantly reflect the changes in the live preview.
• Apply Custom Fonts Sitewide (Optional):
• For global typography settings, go to Site Settings in Elementor (hamburger menu in the top left).
• Navigate to Typography > Body or Headings.
• Select your custom font to make it the default font for body text or headings across the entire site.
• Save and Preview:
• Once satisfied with the typography, click the Update button to save your changes.
• Preview the page to ensure the custom font displays correctly on the frontend.

Additional Tips:

• If your custom font does not appear in the dropdown, clear your site and browser cache or re-upload the fonts.
• Always check mobile and tablet views to ensure fonts render legibly at different screen sizes.
• Combining custom fonts with Elementor’s responsive typography features enhances design flexibility.

By following these steps, you can fully utilize your uploaded custom fonts in Elementor’s free version, enhancing your website’s branding and visual appeal uniquely and professionally.

Once you have installed and activated the plugin, you can use the appearance and custom fonts. A new page will appear where you will add the font name and font fallback. Moreover, add and upload different font formats you have downloaded from Google and wish to have in Elementor.

That’s it! Once you add the custom fonts in Elementor free using a plugin, you will get the same kind of options under the typography settings of Elementor. Just download the font from Google, type the name of the font you want, and then add it to the list in Elementor for free.

Ready to Add Custom Fonts in Elementor Free:

Wrapping up the discussion with a note that yes, it is possible to add custom fonts in Elementor Free, but you have to install a plugin for it. The custom fonts and any other premium features you want to access can also be it using a plugin. And if this is something you are comfortable with, then you can go for it.

The key takeaways from today’s article are;

1. Install and activate the plugin
2. Download the Google fonts and unzip the file
3. Access the plugin using the Appearance
4. Add the name of the font you downloaded
5. Upload the custom fonts you installed
6. That’s it; you’re all done
7. Repeat the process to add another font

WordPress custom fonts plugin Elementor

A WordPress custom fonts plugin for Elementor allows users, especially those using the free version of Elementor, to upload and use custom font files on their websites without needing Elementor Pro’s built-in custom font feature.

Key Points:

• Purpose: Enables adding self-hosted fonts or external fonts that are not included in the default Elementor typography options.
• Popular Plugins:
• Custom Fonts by Brainstorm Force: Integrates seamlessly with Elementor and works site-wide, even outside Elementor.
• Use Any Font: Another popular plugin supporting multiple page builders.
• Supported Font Formats: Typically supports WOFF, WOFF2, TTF, SVG, and EOT font formats for broad browser compatibility.
• Usage: After installing and activating the plugin, users upload font files via the WordPress dashboard. These fonts then become available in Elementor’s typography settings under the free version.
• Benefits:
• Provides flexibility to customize website typography uniquely.
• Avoids reliance on Google Fonts only.
• Improves branding by matching specific font styles.
• Differences from Elementor Pro: The Pro version has the custom fonts feature built in, but free users depend on these plugins for custom font support.

This plugin approach is ideal for free Elementor users wanting professional, branded typographic control without upgrading to Pro.

Free custom fonts Elementor integration

Free custom fonts integration in Elementor means you can add and use fonts beyond the default ones offered without purchasing Elementor Pro. Since the built-in custom fonts feature is exclusive to Elementor Pro, free users typically rely on WordPress plugins or compatible themes to upload and manage custom fonts.

How Free Custom Fonts Integration Works:

1. Use a WordPress Plugin:
   Plugins like Custom Fonts or Use Any Font allow uploading font files (like TTF, WOFF, WOFF2) to your WordPress site. Once uploaded, these fonts become available in the Elementor typography options, even in the free version.
2. Upload Font Files:
   After installing the plugin, you upload font files under the new “Custom Fonts” menu in the WordPress dashboard. The plugin handles registering and loading these fonts on your site.
3. Apply Fonts in Elementor:
   Inside the Elementor editor, you can select the uploaded custom fonts for any text widget via the Style > Typography settings. Your custom fonts appear in the font-family dropdown alongside default fonts.

Benefits of Free Custom Fonts Integration:

• Customize typography without additional cost.
• Use unique or branded fonts to enhance site aesthetics.
• Maintain flexibility and control over font hosting and performance.

In short:

Free custom fonts in Elementor require third-party plugins to upload and register fonts since Elementor’s own custom font setting is Pro-exclusive. This allows free users to still enjoy unique typography customization easily and effectively.

Hope this guide remains helpful to you. If yes, remember to subscribe to our newsletter for further exquisite helping posts.

Till Next!

Recommendation: Edit the Footer in WordPress Using Elementor.

FAQs

• Author
• Recent Posts

Social Media

TIPsoont

A Complete Blog full of Motivation and Learning about Website DesigningMarketing.

Do Subscribe the Newsletter and Push Notification Because we'll share premium knowledge about web here for free.

Social Media

Latest posts by TIPsoont (see all)

• Squarespace Template Change Guide for Versions 7.0 and 7.1 in 2025 - September 17, 2025
• Best WordPress Books, Custom CSS Tips & Elementor Free Guide (2025) - September 17, 2025
• How Long Learn WordPress? (Complete Guide 2025) - September 15, 2025