How to Add Font in WordPress Elementor: Two Easy Step-By-Step Methods

What are custom fonts in Elementor?

With Elementor, adding custom fonts to your website is easy and flexible. You can bring in your own self-hosted fonts or even Adobe fonts to make your website’s content stand out.

Plus, you can adjust your font’s look to match your brand perfectly. By connecting with Adobe Typekit, you can use all of Adobe’s fonts right in Elementor.

Elementor supports five custom font formats:

1. WOFF (Web Open Font Format): Highly recommended and supported by most modern browsers, making it a top choice.
2. WOFF 2.0: Offers better compression than WOFF and supports OpenType and TrueType fonts.
3. SVG Fonts: Great for older iPhones, SVG fonts let you display vector graphics as text.
4. TrueType Fonts (TTF): Developed by Microsoft and Apple, this format is a classic choice. You scale and rotate TrueType Fonts. Plus, they look good in all sizes.
5. Embedded OpenType Fonts (EOT): Designed for Internet Explorer support, making it handy for certain users.

Using these options, you can make your website’s text eye-catching and perfectly aligned with your brand’s style.

Benefits of custom fonts for web design

Some people believe that the main purpose of typography is just to make a message clear, but when it comes to websites, there’s more to it.

Unlike reading a book or magazine where you follow the pages in order, using a website is different because you can move around freely. This means it’s easier for visitors to lose track of what they were looking at.

Poor typography choices or bad font usage can even drive people away from your site. In fact, inappropriate font usage double’s a reader’s reading time, making them frustrated and leaving half-way through.

However, choosing the right fonts and typography layout can greatly enhance your site’s visual hierarchy, making it more readable, accessible, and setting the tone for your entire site.

• Craft a distinct brand identity: In the digital world, brand perception is everything. That’s why setting yourself apart is important. Having unique typography allows you to have complete control over your brand’s appearance helping you to stand out.
• Boost user experience with the right typography: More than just enhancing your website, custom fonts can improve its functionality. Choosing fonts that are easy to read on screens ensures visitors stay engaged and don’t leave out of frustration. You can also tailor fonts to the devices most used by your audience for better readability.
• Improve site speed for better user satisfaction: Your font choices can affect your site’s speed. Picking lightweight fonts, using font subsets, or self-hosting your fonts can help keep your site fast and user-friendly. Proper font hierarchy can also help your page to rank and in indexing.
• Ensure accessibility and inclusivity: A well-designed website considers all users, including those with visual impairments or dyslexia. Selecting fonts that are easy for everyone to read is not only good practice but also prevents potential complaints from your customers.
• Maintain brand consistency for increased recognition: Consistent typography across all digital platforms strengthens your brand identity and aids in brand recognition. This consistency ensures your brand’s voice and message are recognizable no matter where they’re encountered.

By leveraging custom fonts and thoughtful typography, you can create a compelling, inclusive, and distinctive online presence that resonates with your audience and showcases your brand.

Where can you download free custom fonts for Elementor?

If you’re looking to enhance your Elementor site with stunning custom fonts, you’re in luck. There are many websites where you can download them like Google Fonts, DaFont, Font Squirrel, Urbanfonts, and FontSpace offer a wide range of stunning fonts at no cost.

Just choose the font you like then click “Download” on the zip file. Unzip the downloaded folder and pick a suitable font format.

Once you’ve done that, you’re all set to upload your new font to WordPress and start using it on your site.

Step-by-step methods of adding custom fonts

Method 1: Using WordPress plugins

If you’re using the free version of Elementor, incorporating custom fonts requires a bit more effort. This version doesn’t directly support adding custom fonts like it does with Google Fonts.

To introduce custom fonts to Elementor, you’ll need the help of a plugin or a WordPress theme that allows for custom font files.

Two of the top plugins for this purpose are Custom Fonts and Custom Typekit Fonts. For this guide, we will use the Custom Fonts plugin.

Step 1: Install and activate the Custom Fonts Plugin

First, head over to the Plugins section, then click on Add New. In the search box, enter “Custom Fonts.” Once you find the plugin, install it and then activate it.

Next, move to the Appearance section. You’ll notice a new menu item called Custom Fonts. Click on this menu. Then, click the Add New Font button to start adding your custom fonts.

Step 2: Upload the font and save variations

First, click on the Local Fonts tab. Then, by clicking the ‘Choose File’ button, upload the preferred font file you have downloaded to your computer.Make sure the file is in the .ttf format. Next, name your font. For instance, in our example, we’ve named our font “Midnight.”

You have the option to add different variations of the font and check how they look in the preview section on the right. Once you’re satisfied with your selections, click the Save Font button to finalize the addition of your new font.

Upload font file, name it, add variations, preview, then save.

Step 3: Check if the font works on Elementor

To start, open a post or page with Elementor. Then, drag and drop either the Headings or Text Editor widget onto the page and enter some text.

Open a post, click edit with elementor, then drag the heading widget to the page

Next, switch to the Style tab and click on the Typography option. In the Family drop-down list, look for your font by typing its name.

You’ll find the font you added, such as “Midnight,” showing up in the list, confirming it’s ready to use.

This shows how the Custom Fonts plugin can help you add custom font families into the free version of Elementor. The process for using the Custom Typekit Fonts plugin also follows a very similar approach.

Method 2: Using Elementor Pro

If you’ve got Elementor Pro for your website, you’re in luck. It comes with a built-in custom font feature.

Let’s walk you through how to add your custom font to Elementor Pro.

Step 1: Add a custom font

To introduce a new font to Elementor, head over to your WordPress dashboard. Here, navigate to Elementor > Custom Fonts > Add New. This is where you can add your new custom font structure.

Give your font a family name. Feel free to pick any name you like; for instance, we’ll go with “Sample Font 1” for this example.

Step 2: Add your font variations then click upload

First, click on the Add Font Variation button to start uploading your font files.

This allows you to customize your font in two ways. First, you can add styles like italic or bold. Second, you can adjust the weight, which changes the thickness of the letters, providing various levels of emphasis.

You can upload your font in various formats like :

1. WOFF (Web Open Font Format): Highly recommended and supported by most modern browsers, making it a top choice.
2. WOFF 2.0: Offers better compression than WOFF and supports OpenType and TrueType fonts.
3. SVG Fonts: Great for older iPhones, SVG fonts let you display vector graphics as text.
4. TrueType Fonts (TTF): Developed by Microsoft and Apple, this format is a classic choice. You scale and rotate TrueType Fonts. Plus, they look good in all sizes.
5. Embedded OpenType Fonts (EOT): Designed for Internet Explorer support, making it handy for certain users.

These formats ensure your font looks great across all browsers.

Upload font variations: styles and weights for compatibility.

If you’re looking for new fonts, there are many online websites where you can download them. Using multiple font formats ensures that your website will support a broad range of browsers for a smooth experience

Remember to upload the respective font files separately for the different formats and variations you’re adding.

By following these steps, you’ll create a more engaging and accessible website for all your visitors.

Upload font files separately for different formats/variations.

Step 3: Publish your chosen font

After selecting and uploading the font file from your media gallery, simply click the publish button.

Step 4: Use your custom fonts

It’s time to try your new font! Go to posts and click edit with Elementor. Once you’re in the Elementor page builder, go to the Style section of any text widget. Look for the Typography settings, and from there, pick the custom font you’ve uploaded.

This is your chance to edit the Typography options. You can adjust the font size, style, weight, decoration, and other settings to make sure it fits perfectly with your website’s design. If you don’t know yet, here’s what they mean:

• Weight – Font weight determines how thick or thin the text appears, with options ranging from light to bold.
• Style – Font style changes the posture of your text, primarily toggling between normal (upright) and italic (slanted to the right).
• Decoration – Font decoration adds creative touches like underlines, strikethroughs, or overlines to your text for emphasis or aesthetic purposes.

In Elementor, choose custom font in text widget’s Style > Typography

Frequently asked questions

Why are Elementor custom fonts not working?

If you’re finding that your Elementor custom fonts aren’t displaying correctly, there could be several reasons behind this. Some common issues include:

• Missing font-weight: The specific font-weight you’re trying to use might not be available.
• Invalid custom code: There could be errors in any custom code you’ve added.
• Caching Issues: Your website’s cache might need refreshing for the changes to show.
• HTTP/HTTPS URL Mismatch: The URLs of your site and the font might not be consistent in terms of security protocol.
• Incomplete Font Variations: Not uploading all the necessary font variations can also cause problems.

Identifying and addressing the specific issue you’re facing can help get your custom fonts working as intended.

How to add a font to WordPress without a Plugin?

If your theme supports it, you can add fonts to WordPress directly without needing a plugin. For example, themes like the Nexter Theme offer the ability to upload custom fonts at no extra cost. This feature allows for straightforward customization of your site’s typography.

Add fonts directly to WordPress theme like Nexter for easy customization

What types of font files does Elementor support?

Elementor supports five types of font files, which are:

• The Web Open Font Format (WOFF)
• The Web Open Font Format 2.0 (WOFF2)
• TrueType Fonts (TTF)
• SVG Fonts
• Embedded OpenType Fonts (EOT)

These formats ensure broad compatibility across different browsers and platforms for your website’s typography.

Can I add multiple font variations to Elementor?

Yes, you can indeed upload several font variations to Elementor. Simply repeat the steps outlined in this guide for each variation you wish to add. This approach allows you to use a diverse range of interactive fonts on your website, enhancing its design and user experience.

Save time updating your website’s font with professional help

And there you go—a complete guide on how easy and simple it is to add your own fonts to your Elementor website. As you’ve learned, it doesn’t matter if you’re using the Elementor Pro or the flexible free version, updating your site to look more unique with custom fonts is easy and clear.

Changing the font on your website may take some time, especially if you have a lot of pages to work with. This is where we can help. Our professional WordPress website support at 1dea can help you save time in enhancing your website and making sure it’s consistent with your brand. Contact us today!