Step-by-Step Guide: Adding Fonts to Your WordPress Site with Elementor

Understanding how to add font in WordPress Elementor can transform your site’s aesthetic and user experience. This guide will walk you through the process, ensuring that adding that perfect font is as easy as pie. 

No fluff, just the essentials to get you up and running. Let’s enhance your website together!

Available Font Formats for Elementor

How to change fonts in Elementor is as versatile as a WordPress page builder. In addition to enriching your web design experience through various formats, expanding font choices in Elementor for WordPress is possible. The supported formats, however, include:

1. WOFF or Web Open Font Format

This is the go-to choice for web designers, considering it supports every today’s modern web browser. WOFF is simply like the universal language – all browsers understand it. Thus, this font format is a hassle-free choice to display text consistently, even across various platforms.

2. WOFF 2.0

The initial WOFF has evolved into WOFF 2.0. Besides being newer, this font format is leaner while having a similar quality to its predecessor. It also means that your website may load faster without compromising the visual appeal of your fonts.

3. TrueType Fonts or TTF

These are the veterans of the font world. Developed by tech giants Apple and Microsoft, TTF fonts have been around since the ’80s. While not as compressed as WOFF or WOFF 2.0, TTF is still widely used and supported, making it a solid choice for web and print.

4. SVG Fonts/Shape

SVG fonts allow you to use vector graphics as characters. Its versatility and scalability allow a super-smooth font – no pixelated look even if you’ve zoomed in the font. 

It’s especially useful for icons and logos that need to scale on different devices, though its use as a font format is less common now due to better alternatives.

5. EOT or Embedded OpenType Fonts

EOT is essentially the dinosaur of font formats, mainly because it was designed to work with older versions of Internet Explorer. 

With the decline of IE’s popularity and the rise of more modern browsers, however, EOT’s usefulness has waned. Still, it’s relevant for historical compatibility reasons.

How to Add Custom Fonts to Elementor Free Versions

The steps for adding custom fonts to WordPress with Elementor for free are very straightforward. However, you need to install a plugin – use Custom Fonts by Brainstorm Force instead. It comes with a seamless integration.

1. Start by Installing the Plugin

Here are the steps:

1. Navigate to your WordPress dashboard, go to Plugins > “Add New”. 
2. Search for “custom fonts by brainstorm” in the search bar, install, and then activate the plugin.

2. Accessing Custom Fonts

Once the plugin is activated, head over to “Appearance” > “Custom Fonts”.

3. Add Your Custom Fonts

Once you’re on the Custom Font, here are the next steps:

1. Click to add a new font family to ensure your site’s text remains readable even if the custom font fails to load for some reason.
2. Now, upload the font files for each variation you want to use. This includes WOFF2, WOFF, TTF, EOT, SVG, and OTF formats.
3. With your fonts uploaded, they’re now available to be utilized within Elementor. Your custom fonts are available under the typography settings so that you can apply them seamlessly.

How to Add Custom Fonts to Elementor Pro Versions

However, if installing a plugin isn’t your style, you should go with the pro version. Here is the guide to installing new fonts in Elementor Pro.

1. Access Custom Fonts Feature

1. Open your WordPress dashboard.
2. Navigate to Elementor > Custom Fonts and hit the “Add New” button. This is where the Elementor font options for WordPress websites begin.

2. Create Your Font Family and Upload

1. Name your font family to start customizing. This name helps you identify your font in Elementor settings later.
2. Click “Add Font Variation” to proceed to the next step, where personalization takes shape.

Although uploading all font formats is ideal for comprehensive support, focusing on WOFF, WOFF 2.0, and TTF can suffice for most needs. After adding variations, publish your new font family to make it available within Elementor.

3. Use Your Fonts in Elementor

1. Open the Elementor editor and select a widget to customize its typography.
2. Find your custom font under the typography settings to elevate your designs.

Consider applying your custom font as a global setting for a cohesive look across your site. This ensures consistency and streamlines your design process.

Table to Understand Common Font Weight Name Mapping

Here’s the guide for the numerical range that decides the weight of your font in WordPress.

Elevate Your Site with Ease

Enhancing your WordPress site with new fonts through Elementor has always been challenging, whether you’re on the free plan or using Elementor Pro. 

For those looking to elevate their design game further, consider ordering fonts from Lettermine. It’s your gateway to an exclusive collection of fonts that can set your content apart. Ready to make your site truly unique? Order now and explore how to add font in WordPress Elementor today. See the difference yourself!

Related Post