How to Easily Add and Use Custom Fonts in Elementor

What are custom fonts in Elementor?

Custom fonts in Elementor allow you to add self-hosted and Adobe fonts to the page builder and use them for your website content. With custom fonts, it's easy to upload any font and modify its characteristics to create a uniquely branded font style for your website.

It's also possible to add Adobe fonts to Elementor and synchronize and use all Typekit fonts through Adobe Typekit integration.

Supported custom font formats

Elementor supports the following five custom font formats:

1. Web Open Font Format (WOFF): This is the most popular and recommended font format, supported by most modern browsers.
2. Web Open Font Format (WOFF 2.0): This file supports OpenType and TrueType fonts and provides better compression than WOFF.
3. SVG Fonts: SVG (Scalable Vector Graphics) is an XML-based vector image format used to define 2D graphics files. This format is particularly useful for displaying SVG glyphs in text, especially on older iPhones.
4. TrueType Fonts (TTF): A font format developed by Microsoft and Apple in the 1980s.
5. Embedded OpenType Fonts (EOT): Designed by Microsoft to support IE.

Where can I download free custom fonts for Elementor?

• Google Fonts
• Dafont
• Font Squirrel
• Urban Fonts
• FontSpace

To download these fonts, simply click the download button on your favorite fonts, unzip the folder, and select the appropriate font format. Once you're done, you can upload the fonts to WordPress and use them in Elementor.

How to add custom fonts to Elementor

Whether you're using the free or premium version of Elementor, it's easy to add custom fonts to your website. However, the custom fonts built into Elementor are only available in Elementor Pro. If you are using the free version, you can add custom fonts to your website by using the WordPress plugin or installing the Nexter Themesto realize.

Here are the detailed steps to add custom fonts to WordPress Elementor.

Step 1: Adding Custom Fonts to Elementor Pro

If you are using Elementor Pro, you can take advantage of its built-in custom font feature. Here are the exact steps:

1. Go to Customize Font Settings
   • In the WordPress dashboard, navigate to the Elementor > Custom FontsThe
   • Click "Add new fonts" button to start adding new custom fonts.

Enter a font family name. Any custom name can be selected .

Step 2: Add font variants and upload fonts

1. On the Customize Fonts page, click "Add Font Variant".
2. Add font names and upload font files in different formats such as WOFF, WOFF2, TTF, SVG and EOT.
3. The required font files can be downloaded from various font catalogs on the web.

4. Multiple variants of a single font can be added by setting the thickness and style of the custom font.
5. For each font format and variant added, upload the appropriate font file separately.

Step 3: Publishing the Final Fonts

After uploading the font file from the media library, click"Release."button. The font is now available in Elementor.

Step 4: Using Custom Fonts on the Elementor Website

1. In the Elementor page builder, open any widget that contains text.
2. Navigate to the Styles section of the text widget.
3. Under Typography Settings, select the custom font you uploaded.
4. Adjust font sizes, styles, thicknesses, embellishments, etc. as needed to make them consistent with your website design

Method 2: How to add custom fonts to Elementor for free?

Adding custom fonts to the free version of Elementor requires some extra work as it doesn't have custom font functionality built-in. To do this, a plugin or WordPress theme that supports custom font files is required.POSIMYTH Innovations' Nexter ThemesIncludes custom font capabilities and seamless integration with Elementor.

Here's how to add custom fonts to Elementor using the Nexter theme.

Step 1: Install Nexter Themes and Extensions

1. In the WordPress dashboard, navigate to theexterior condition > thematic > Add New TopicThe
2. Search for and install Nexter themes.
3. Click on "Install Nexter Extension" and activate the plug-in.

Step 2: Enable Custom Fonts

1. After activating the theme, go to the WordPress dashboard and go to theexterior condition > Nexter Settings > additional optionThe
2. Find and enable the custom font upload option.

Step 3: Download the customized font file

1. Download custom font files from any free font directory site such as dafont.com.
2. Find a font that matches your design and brand identity, click Download and extract the downloaded zip file.

Step 4: Upload Custom Fonts

1. Go to the Nexter Settings page and click the Settings icon under the Custom Font Upload option to import your fonts.
2. Choose "Simple Font Upload" to upload a single font file at a time, or "Variable Font Upload" to upload multiple variations of a font (e.g. bold, italic, etc.).

3. Enter the font name, upload the font file from the system, select the variant, and then click Save Font.

Step 5: Using Custom Fonts on the Elementor Website

1. Open the Elementor page builder and go to the page you are editing.
2. Navigate totype > typographical, select the uploaded custom font.
3. Customize font settings, including size, spacing, style, letter height, etc., to keep them consistent with your website design.

Summary:

This article details how easy it is to integrate and apply custom fonts with the step-by-step guide provided in this article, whether you are using Elementor Pro or the free version. For Pro users, you can take advantage of the built-in custom fonts feature, while free users can achieve the same effect with the Nexter theme. With these methods, it is possible to create uniquely branded font styles for your website that are consistent with the design and brand image.