3 Simple Steps To Add Custom Fonts In Elementor

Want to make your website stand out from the crowd and grab instant attention from your website visitors? Then you should definitely use the Elementor’s Custom Font feature. Incorporating custom fonts on your website will not only make your website appealing but will also help it to look different typographically.

Though the Elementor page builder offers 800+ Google fonts to choose from, sometimes they are not sufficient for you, or you just want to take your web design experience to the next level by using fonts apart from the standard or Google fonts.

So, in this tutorial, we will guide you to create your own custom fonts in Elementor so that you can set up your brand recognition.

What is the need to use Custom Fonts?

There might be a question that would arise in your mind, that if Elementor offers 800+ font styles which I can directly implement without any hassle, so what is the need to use extra custom fonts.

The answer to the question is that, if you want to make a difference and earmark the uniqueness that separates you from the rest of the crowd, then you can simply achieve this by using customized fonts in Elementor.

How To Add Custom Fonts in Elementor

Elementor Pro provides you with the feature to implement custom fonts on your website without using any 3rd party addon and without writing any code. To allow visitors to see your customized font styles, the font should be uploaded to your WordPress website as a standard format.

With, Elementor you can create custom fonts for the various font formats, that provide support to the various web browsers.

Available Font Formats are:

• The Web Open Font Format (WOFF): WOFF is the most recommended format to use since it is supported by all modern browsers.
• The Web Open Font Format (WOFF 2.0): TrueType/OpenType font that provides better compression than WOFF 1.0.
• TrueType Fonts (TTF): This font was developed in the late 1980s, by Apple and Microsoft.
• SVG Fonts/Shapes: SVG fonts allow SVG to be used as glyphs when displaying text. Make sure to use this format to support old versions of the iPhone.
• Embedded OpenType Fonts (EOT): This font file works on IE, but not on other browsers. Make sure to use this format to support earlier versions of IE.

So, without any further delay let just dive into the steps to add custom fonts in Elementor.

Getting Started

Step 1: To begin with Go to WordPress admin dashboard and navigate to the Elementor >> Custom Fonts and then click on Add New.

Step 2: Next, enter the respective font name and upload its WOFF, WOFF2, TTF, SVG, or EOT files.

Note: It is recommended to upload the font files in all the standard formats to make it compatible with all the browsers. Otherwise, the fonts will not appear on different browsers.

You can also add different font variations to the same font like Weight and Style and you can easily use them as you need. For each font variations that you are adding you will have to upload its respective font files individually.

After you are done with uploading all the files and setting up variations simply just, Click on Publish and you are all set.

Once the files are uploaded, it will be available in the typography controls of every widget that controls the text. 

Step 3: Now go to the Elementor Editor and edit the widget which has some text in it. Under the Style Tab>> Typography option select the custom font that you have uploaded.

That’s it all your custom fonts are ready and you can use them anywhere on your website.