Always here to help you answer all your questions, text me anytime!

share:
Share on facebook
Share on twitter
Share on linkedin

How to Add Custom Fonts to WordPress with Elementor?

vintage-christmas-alphabet-

Table of Contents

Custom Fonts: Can drastically enhance your Elementor WordPress Website!

A client asked me to use the fonts used by Apple. I wanted to make sure I got his request right, so I did a search in Google and found this answer:

What font typeface does Apple use online? 

 
Originally Answered: What font (typeface) does Apple use online?
They use several. Their corporate font is Adobe Myriad Pro, a subset of which can be found digging through the .app file for Adobe Reader. The current system font (which you’ll also find on much of the web page) is Helvetica Neue, which only recently replaced Lucida Grande.

Update: the San Francisco font used on the Apple Watch will be replacing Helvetica for iOS 9 and OS X El Capitan. Contrary to popular belief, it isn’t that much like Google’s Roboto; they do have some similarities, but they’re not even close to identical.

The answer left me confused because I still was not sure as to what was the specific font that Google uses in its website, so I did something else, I searched for:

How to Identify Fonts on the Web?

The first answer/ suggestion was

How To Use WhatFont

WhatFont is one of two tools we have used to identify fonts on the web. WhatFont is very user-friendly.

Step-by-step how to use WhatFont:

    1. Go to this website: https://www.chengyinliu.com/whatfont.html
    2. Bookmark it, add the Google chrome extension, or add the Safari extension (we use the Google chrome extension)
    3. Go to the website that you want to find out the font and click on the WhatFont extension
    4. Hover over the web page and start to discover the fonts being used!

Go to Google Web Store

I added the What the Font Extension to my Chrome Browser

font finder extension

I went to the Apple website and right-clicked one of the titles

 

Custom Fonts: Can drastically enhance your Elementor WordPress Website!​

Found the Font to be HelveticaNeue

This font is not a font that is carried by most operating systems and it is not part of Google Fonts, so I had to add to the site as a custom font.

I went to FreeFontsDownload.net and found a free version. 
 

How to Add Custom Fonts to WordPress with Elementor? 1

Adding the Font to Elementor

Under the Elementor tab, select custom fonts, then give your new font collection a name.

Adding the Font to Elementor

Click on “Upload Fonts” and select your font variations, make sure you know what is their format, in my case, they are true typeface .ttf . The fonts can be upload all at once, but they have to be saved individually as a “font variation”; It was a little weird that I had to select a month to see the fonts.

upload font

Elementor is making the web beautiful

follow us:

More to explorer

CALL ME
+
Call me!
Call Now Button

Let's keep in touch...

Anytime you are ready for a friendly, pressure-free conversation, I will be here.

- Orange Snowman