How to Add Fonts to Elementor Free

How to Add Fonts to Elementor Free

Last modified: March 30, 2023

Cloudways

If you want to add a little extra flair to your WordPress Elementor website, then you might want to change your font and then use a custom font. In this article, we describe how to add fonts to Elementor free.

Show More

* This button will show the rest of the post and open up an offer from a vendor

Why Add Fonts?

Fonts are a little hint to your website and brand characteristics. Some brands use fonts to give more details about what the audience can expect from the brand. And therefore, you can set the mood with the customer.

And there are a limited number of fonts (800 Google fonts) that are usually included with Elementor and WordPress in general. So you will need to add your fonts.

How to Add Custom Fonts to WordPress Manually

There is a great method to add custom fonts to WordPress manually. But there are some technical aspects to this approach. So while this is a solution, it might be something that those new to WordPress and Elementor might not be able to do without the help of a website developer.

The first thing that you will need to do is to create a ‘fonts’ folder in the theme’s folder via an FTP client. The new folder should be located in the wp-content/themes/fonts.

Once you’ve added the new folder, you can add all the font files to it. Now you can open the theme’s stylesheet (style.css) and then you can add the following code to the file, towards the end of the document.

@font-face {
    font-family: 'nameofnewfont';
    src: url("/fonts/nameofnewfont.woff2") format("woff2"),
   	  url("/fonts/nameofnewfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

 

Then you need to configure the elements that will use the font by adding them to the same stylesheet.

To add fonts to your website, you need to go to your WordPress Dashboard, then Elementor, and find the Custom Fonts option. You want to click on ‘Add New’. Then you want to add the font with the name and upload the file with WOFF, WOFF2, TIF, SVG, or EOT file format. It is highly recommended that you upload as many font files as possible, that way you can provide support to the numerous browsers that might visit your website.

Once you’ve uploaded the files, the custom fonts will be available in the typography controls of every widget that contains the text.

To start using the new fonts, you can go to any page on your website that is using Elementor and then start using the new fonts on your website.

If you’re stuck for fonts, numerous websites can allow you to browse their libraries and then select the fonts you want on your website. You can download the right files and then insert them into your Elementor website.

Is it Worth It?

Yes. Research has shown that customers can make purchasing decisions based on your typeface. Therefore, if you get it right, you can earn more revenue. You might want to try split testing to see if a different font makes a difference or not.

Final Word: How to Add Fonts to Elementor Free

Above are the instructions on how to add fonts to Elementor free. It isn’t a simple process, but one that can make a significant difference to your business’s success online.

Recap:
Save 4 Later
Email liked links to yourself