How to Add Custom Fonts on Elementor | WpBuilt 1350206722971493323
How to Add Custom Fonts on Elementor

How to Add Custom Fonts on Elementor

Fonts. One way of making your site unique is by using unique fonts not found in google fonts. But how can we use these custom fonts in our site?

Here are three free online converters I’ve found that could help you convert your fonts into web-fonts:

NOTE: You should check the converted fonts first if they have been properly converted! Sometimes the converters aren’t able to convert the fonts. In those cases you should try to convert it in another online web font converter. Below is an example of a case my custom font did not convert.

This is the custom font I wanted to use. (I got this font from: )

**This is sad…it didn’t convert correctly 🙁 **

There’s plenty of online web font converters out there, the three I gave are my personal preferences. Feel free to explore and find a converter you’ll work with most.

Once your font is converted, this is where we start. First off, check what font file type is converted.

Now let’s head on to our site!

1. Go to Elementor > Custom Fonts then add new.

2. Next is you upload the file to its respective file type. Don’t forget to name the font! After doing so, just hit the publish button. 🙂

NOTE: There are fonts that have a variety of weight and style. You’ll have to individually upload it by clicking ‘Add Font Variation’ and setting the weight and style from there under the same font. (if it’s the same font.)

3. So now we’ve uploaded our font and it’s ready to use! Here I have a sample text that I want to use the font width.

Just head in to the style tab > typography and select the custom font you’ve uploaded from there.

And ta-dah! Your custom font is there for you to use at any part of your site!


Happy font styling! 😀

Leave a Reply