Skip to content

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

Reading Time: 3 minutes
Install custom fonts to Elementor & WordPress

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/
  1. Make sure your download font is in one of the following formats:
    1. .woff2
    2. .woff
    3. .ttf
    4. .eot
    5. .svg
    6. .otf
  2. Make sure you download all the font variants: Thin, Light, Normal, Medium, Bold, Extra bold, etc…
All font weights for Elementor & WordPress

Upload your font to WordPress & Elementor

Before uploading & installing the code

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.

Font uploaded and Installed on Elementor & WordPress

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

Leave a Reply

Subscribe, I never spam

Agapi
stepanyanagapi229
Read More
Although I don’t have a restaurant the urge to read it was too strong and didn’t disappoint. I guess if you have a restaurant this is a must-read. Thanks a lot.
Diogo Barros
Diogo Barros
Read More
Thank you !
J
J
Read More
i've been searching everywhere for this solution, you're the first person who gave a simple solution. Ty
Farah I
Farah I
Read More
Thanks. I already have cloudflare and its still slow.. was thinking of how to remove unused js... but found your video instead
BLACK ANT
BLACK ANT
Read More
makes complete sense bro. Thank you
 Tobee Panyasith
Tobee Panyasith
Read More
Thank you for this great video

Table of Content

Subscribe to my mailing list

I never spam