0

How to Add Font in WordPress Elementor: Two Easy Methods

Brian Bojan Dordevic
About The Author

Brian Decoded

President at Alpha Efficiency

Join me at the forefront of web design and digital marketing innovation. I am obsessed with web design, business philosophy and marketing performance.
I write Conversion Insider newsletter.

Web typography and font style are crucial – and typically overlooked – aspects of designing an attractive and engaging website. Elementor offers its users a wide variety of default fonts for their website designs. However, such pre-existing fonts don’t always cut it – especially when you want to communicate unique brand values.

Fortunately, Elementor allows you to add your own custom fonts and experiment with new styles.

Today, I’ll show you two methods you can use to add custom fonts on Elementor.

By learning how to add font in WordPress Elementor, you’ll be able to give your brand’s website its signature look. Custom fonts will help you create more engaging websites that keep visitors exploring your pages.

Table of Contents:
How to add font in wordpress elementor

What are custom fonts in Elementor?

Custom fonts are those that aren’t built-in by default on the website builder platform. They include fonts you purchased, self-hosted, and Adobe fonts.  You can add custom fonts to Elementor page builder and use them to give a more personalized appeal to your website content.

Elementor gives you the option of uploading any fonts you want and allows you to modify font characteristics to create brand-new styles that represent your brand identity. Custom fonts become crucial when, for example, you are working on a luxury website designPremium websites require unique, sophisticated elements – that include one-of-a-kind style fonts.

Fortunately, WordPress Elementor gives web designers the chance to work with multiple font variants by adding custom fonts. That said, this page builder only offers support for five custom form formats:

  • The Web Open Font Format (WOFF): The most popular and recommended one, supported by most modern browsers.
  • The Web Open Font Format (WOFF 2): This format supports OpenType and TrueType fonts and provides better compression than WOFF.
  • Scalable Vector Graphics (SVG) Fonts: SVT is used for defining 2D graphic file formats; you can use this format to display SVG glyphs in text. This format is useful to support older versions of iPhone.
  • TrueType Fonts (TTF): An old format developed by Apple and Microsoft in the 1980s.
  • Embedded OpenType Fonts (EOT): This font format supports EI but not other browsers.

How to add font in WordPress Elementor: 2 Best Methods

You can add custom fonts to improve your website whether you are using Elementors Pro or the free version. Then, is Elementor Pro worth it? The premium version comes with a built-in custom fonts feature that will make having full font control musch easier. For the free version, you will have to install a WordPress typography plugin.

Here is how to add font in WordPress for Elementor for its two versions:

Method 1: Adding Custom Fonts in Elementor Pro

Method 1

If you have Elementor Pro, the custom fonts feature built-in will streamline this process. These are the steps to activate and upload custom fonts_

Step 1: Adding Custom Fonts to Elementor

To add your fonts, head to the WordPress dashboard and click on Elementor > Custom Fonts >Add New. There you can select the new fonts you wish to add.

There you can also enter the font family name – you can choose any custom name.

Step 2: Adding Font Variations And Uploading The Fonts

Next, it’s time to upload your font files and add different variations. For that, click on Add Font Variation.

At this step, write the font name and upload the font files for the supported formats – the ones I mentioned earlier: WOFF, WOFF2, TTF, SVG, and EOT.

I recommend you add as many formats as possible; that way, you ensure to cover a broad range of browsers and guarantee a superb website experience for all your visitors.

Don’t forget to upload the respective font files individually for each font format and variation you include.

Step 3: It’s Time to Publish the Final Font

After you finish uploading font files from your media gallery, click on the Publish button.

The fonts should now be available on Elementor widget typography settings, and you can use them across all your text widgets.

Method 2: Adding Custom Fonts in Elementor Free

Method 2

How to add font in WordPress Elementor free version? It takes a little more work since you don’t have the built-in custom font feature, and you can’t import them directly from font catalog websites like Google Fonts.

In this case, to add fonts, you will need a WordPress widget or essential addons for Elementor that support custom font files.

There are several great plugins that work well to add font; for this guide, I’ll use the Nexter Theme.

Step 1: Installing Nexter Theme and Extension

You can install the Nexter Theme and extension for free from the WordPress library. Head to the WordPress dashboard and click on Appearance > Theme > Add New. Look for Nexter Theme, install it, then click on Install Nexter Extension and Activate Plugin.

Step 2: Enabling the Custom Font Feature

After activating Nexter Theme, go back to your WordPress dashboard and click on Appearance > Nexter Settings > Extra Options. 

There, search for the Custom Font Upload option and make sure to enable it.

Step 3: Downloading Custom Font Files

You can download custom template font files from any free font catalog website.

Opt for one with extensive options and font families, and pick the one that best aligns with your brand image and web design.

Step 4: Uploading The Downloaded Fonts into WordPress

Go to the Nexter Settings page and click on the settings icon to start importing the custom fonts.

With Simple Font Upload, you can upload a single file at a time, but if you want to add multiple variations, like bold or italic, use the Variable Font Upload option.

Enter the font name, upload the custom font file or files, and click on Save Font. 

This step will add the custom font into Elementor WordPress so you can use it on your website design.

Step 5: Use The Custom Font to Personalize Your Website

To use the custom fonts you just added, go to the Elementor page you are working on, and navigate to Stiles > Typography.

Pick one of the fonts you uploaded and use it in your website content.

A huge pro of Elementor is that it allows you to fully customize the font settings. You can change the font size, style, space, letter height, and more to further personalize your titles, body text, and header text.

How Can Custom Fonts Level Up Your Website?

Benefits - how to add font in wordpress elementor

Did you know typography makes up 95% of a website? Typography in web design plays a fundamental role in the performance and success of any website.

Some people may say that the sole purpose of typography is to “clearly convey a message.” That is only partially true for websites. Unlike books or magazines, a website reading experience is not linear but divergent, making it easier for website visitors to get distracted. Or even worse, some types of typography can turn users off and lead them to leave your website.

On the other hand, the right fonts and typography can help you establish a strong visual hierarchy, optimize readability and accessibility, and set the overall tone of your website.

The benefits of custom fonts for web design are countless, including the following ones:

You Can Create a Unique Identity for Your Business

Businesses highly depend on how consumers perceive their brands. Therefore, building a strong brand identity that sets your business apart from competitors is crucial. One of the best ways my team at Alpha Efficiency establishes a solid brand identity for my clients is through website content font.

Custom type design means customizing typography with the purpose of using it exclusively for a brand, company, or product. Using custom font types gives you full control over your brand’s look and feel.

How do you want your brand to come across to your customers? Some typographies can evoke a casual and relaxed tone, while others will position your business as a more serious entity. I recommend exploring experimental typography if you want to make your brand stand out and attract more clients.

Enhance User Experience Through the Right Typography

Custom fonts do much more than help you create visually appealing websites and build a unique business identity. They also have the power to enhance different functional aspects of a website.

Improved Readability – Avoid Visitors to Abandom Your Site

Some types of fonts are challenging to translate well onto screens. If visitors have a hard time reading your website content, they will leave your site. Your content is supposed to grab users’ attention and engage them; if visitors can’t consume your content due to poor typography, you have a big issue on your hands.

A well-chosen font, which is legible and with appropriate letter spacing, ensures users can easily consume your site content. Moreover, you can choose or design a font specific to the devices your target audience tends to use.

Faster Loading Speed to Higher Customer Satisfaction

Research suggests that 47% of internet users expect a website to load in 2 seconds or less. Can your typography choices have an impact on your website loading speed? Yes, using heavy fonts can slow down your website’s loading speed and compromise its overall performance, leading to user frustration.

If your custom fonts are making your site slow, opt for font subsets to reduce file sizes, use only modern font formats, or self host your fonts. You can also use WordPress plugins to improve your site loading times. For that, I would recommend WP Rocket Elementor, a premium plugin that my web development company uses to enhance website loading speed.

Accessibility that Guarantees Inclusivity

Web designers must take into consideration accessibility and inclusivity aspects when working on a professional web design. Users with visual impairments or dyslexia may find it challenging to read specific fonts or typography styles. Those users will not only leave your site before consuming your content, but they can also file a complaint or lawsuit against your business.

Choosing inclusive font items you want to cross from an ADA website compliance checklist. In addition, don’t forget to add dark mode and adjustable font size options to improve the user experience for all your website visitors.

Create Brand Consistency To Gain Brand Recognition

Consistent typography across your business’s digital presence enhances brand identity and boosts brand recognition. By maintaining uniformity in typography style and formatting, your clients will instantly recognize your brand voice and message no matter the platform they are using.

Ready to Personalize Your Elementor Website with Custom Fonts?

If you are working on a professional website, custom fonts are almost mandatory.

Default fonts simply lack all the elements a professional website content needs to succeed, such as better legibility and greater control over style aspects.

Do you want to learn how to add font in WordPress Elementor and other ways to enhance your business’ brand identity? I developed an Elementor course with all the insight you’ll need to:

  • Add fonts that translate your brand’s unique signature
  • Create fast, high-performing sites
  • Craft satisfying user experiences
  • Smoothly migrate your design from Figma to Elementor
  • Turn all your web design projects into profitable ventures

Check my Elementor course and learn how to create websites that stand out and outperform your competition.

Portfolio

Fresh inspiration is a fingertip away,
Download Our Portfolio.

Download Our Portfolio