Install custom fonts on Elementor Free & WordPress – Step by step

Alright alright, fair request, you want to install completely custom fonts on your website, you want to stand out, and Elementor asks you to go pro to install custom fonts. That’s why Your Man Nar is here. I will very quickly show you how to install custom fonts on Elementor Free & WordPress.

The process:

1. Install & activate the required plugins
2. Download or purchase your font
3. Upload your font to WordPress & Elementor
4. Quick Answers – Sum up in a paragraph

Install & activate the required plugins

Custom Fonts – One of the best plugins to install a font on WordPress. Intuitively this will be used to upload the fonts and define its different weights.

Elementor – Obviously.

Download or purchase your font

This rather intuitive, let me quickly brief you on the steps and actions:

1. Download your font – This is your part, download or purchase the font from an authorized website. Make sure you do not violate any rights. At least do your best 😀

Here are some websites to consider downloading fonts from:

1. https://www.dfonts.org/
2. https://fontsfree.net/ 
3. https://www.downloadfonts.io/
4. https://www.1001freefonts.com/

2. Make sure your download font is in one of the following formats:
   1. .woff2
   2. .woff
   3. .ttf
   4. .eot
   5. .svg
   6. .otf
3. Make sure you download all the font variants: Thin, Light, Normal, Medium, Bold, Extra bold, etc…

Upload your font to WordPress & Elementor

Easy, after activating Custom Fonts, go to Appearance -> Custom Fonts

In my example here, I’ve downloaded Apple’s SF Pro font from Thin to Extra Bold.

1. Name the font – The name will appear in Elementor’s typography edit section.

2. Choose the font’s weight (Thin, Light, Bold, etc…).
3. Upload the corresponding file.

4. Click Add Font Variation.

5. Now change the font’s weight, and upload its corresponding file.
6. Repeat the process for all the font weights.
7. Click on Add New Font after finishing.

This way you would have added the font with all of its weight variants.

Now go to Elementor’s editor, go to the edit any font, and in the typography search for the font name you have just added.

With your newly installed font, create a beautiful coming soon landing page.

Quick Answers – Sum up in a paragraph

1. Install & Activate Custom Fonts
2. Download your desired font
3. Go to Appearance -> Custom Fonts
4. Start uploading your font and its weights
5. Done