By clicking "Accept" or continuing to use this site you consent to being tracked through the use of cookies.

Free WordPress and online marketing tutorials?
Yes!
Free WordPress and online marketing tutorials?
Yes!

How To Add Custom Fonts To Elementor

Elementor Pro comes with most Google Fonts available. But sometimes you come across a font that's not on Google Fonts and you want it. Well, you may have it. Here's how.
Share on email
Share on mix
Share on whatsapp
Share on linkedin
Share on reddit
Share on facebook

Get WordPress tutorials and online marketing tips delivered to your digital door

Sign Up
My articles are FREE to read. But when you buy through my referral links I earn commission. You don't pay more but I get rewarded for my hard work. It's like a salesman in a shop showing you the goods. Thanks for your support. I really appreciate it.
More Elementor
Table of Contents

Google Fonts comes with enough fonts (typefaces, for sticklers) to start a new graphic design revolution every day, but what if your client insists on using some obscure font they found on a free font site?

Can you add custom fonts to WordPress using Elementor?

Yes you can.

There are two ways: you can either find a font that gives you web font variants or turn a desktop font into a web font and upload it to your WordPress website.

In this post I’ll show you step-by-step how to do it both ways.

The tools

These are the tools you’ll need to add custom fonts to your WordPress website:

  • WordPress.
    • This is the self-hosted version of WordPress, not wordpress.com.
  • Page Builder Framework.
    • Strictly speaking, you don’t need Page Builder Framework, but it works great with page builders like Elementor.
  • Elementor Pro.
    • You’ll need Elementor Pro for this tutorial.
  • fontspring.com.
    • Fontspring is a fantastic source for typefaces. We’ll use one of their free fonts for this tutorial.
  • transfonter.org.
    • This tool transmogrifies your fonts for use on your WordPress website.

This tutorial assumes two things:

  • You’ve created a Fontspring account.
  • You’re logged into your WordPress admin panel and can access your Elementor Pro admin dashboard.

Font requirements

You need the following font files to ensure your custom font displays correctly in as many browsers as possible:

  • WOFF – Web Open Font Format, used by modern browsers.
  • WOFF2 – Web Open Font Format 2, used by uber modern browsers.
  • TTF – TrueType Fonts, allowing for better Safari, Android and iOS support.
  • SVG – used by legacy iOS systems.
  • EOT – Embedded OpenType, used by Internet Explorer 6 to Internet Explorer 9 browsers.

Fontspring gives you all of those formats, but I want to show you another tool that lets you create those files from fonts you don’t have all those variants for. In other words, if you only have a desktop font, this tool will create the necessary files for you.

Using web fonts

This is the quickest way to add a custom font to your website.

You simply find a great typeface on Fontspring, download the web font variant and upload the files to your website using Elementor.

This tutorial assumes you’re logged into your Fontspring account and you’ve found a font to your liking.

We’ll be installing Amerta Misty, a free script font available from Fontspring.

The only way you can download fonts—even free fonts—from Fontspring is to add them to a cart and go through checkout.

Let’s go.

Find a font

On the Fontspring website, in the search box in the header of the site, start typing the name of the font you’d like to use.

Since we’re using Amerta Misty, we type amert and Fontspring automagically finds the right font.

Fontspring's Intuitive Search Function Automagically Finds The Font You're Searching For
Fontspring‘s Intuitive Search Function Automagically Finds The Font You’re Searching For.
Click On The Name Of The Font
Click On The Name Of The Font.

This opens the font’s landing page.

Buy the font (at no cost)

Click The Button That Reads Download Family
Click The Button That Reads Download Family.

Choose the variants

Amerta Misty comes with desktop, web font, ebook and application variants, but since we only need it for a website, we’ll choose the Web Font variant.

Add The Web Font Variant To Your Fontspring Cart
Add The Web Font Variant To Your Fontspring Cart.
View Your Cart
View Your Cart.
Click The Checkout Button
Click The Checkout Button.

Generate web font files

Now wait for the system to process your order, then click the Download button.

Download Your Font
Click The Download Button.
Click The Generate Webfont Files Button
Click The Generate Webfont Files Button.

You’re presented with three options:

  • Basic
  • Standard
  • Expert

The standard option is more than sufficient for our needs.

Click The Standard Tab
Click The Standard Tab.
Choose The Font Formats, Subsetting Settings And Opentype Features
Choose The Font Formats, Subsetting Settings And Opentype Features.

The difference between EOT Lite and EOT Compressed are negligible, and the Basic Subsetting setting is fine for our purpose.

Download your web fonts

Click The Button That Reads Download Your Kit
Click The Button That Reads Download Your Kit.

Wait for the zip file containing your files to download. You’ll need to be able to find your files on your computer, so make sure you know where they download to.

Extract the font files

My Chrome browser downloads all files to my desktop, so I’ll find my zipped font folder there and simply extract my fonts.

For this step I use the freeware utility, 7-Zip. You might be using another program, which means the process might differ slightly for you.

I Unzip Folders Uisng 7zip. You Might Have A Different Program, So This Step Might Be Different For You
I Unzip 7-Zip For Extraction. You Might Have A Different Program, So This Step Might Be Different For You.

When you choose 7-Zip’s Extract Here option, the files inside the zipped folder are dumped on your desktop. This is a problem if there are plenty of files. You might want to use the Extract files… option, which places the extracted files inside a folder on your desktop.

But since the Amerta Misty zipped folder doesn’t come with too many files I’ll dump it directly on my desktop.

The Font Files Dumped Onto My Desktop. We Don't Need All The Files For Upload, So Much Of It's Superfluous
The Font Files Dumped Onto My Desktop. We Don’t Need All The Files For Upload, So Much Of It’s Superfluous.

Open Elementor Custom Fonts

As mentioned before, this tutorial assumes you’re logged into your WordPress dashboard.

Let’s add the custom font.

In The Left Hand Sidebar, Hover Over Elementor, Then Click On Custom Fonts
In The Left Hand Sidebar, Hover Over Elementor, Then Click On Custom Fonts.

Add a new custom font

Now we’ll add the font.

Inside The Custom Fonts Window, Click On Add New
Inside The Custom Fonts Window, Click On Add New.

Name the font

You can name the font anything you like, but it’s sensible to give it the name the creator gave it.

Give Your Custom Font A Name
Give Your Custom Font A Name. Unless I Created The Font Myself, I Use The Original Name.

Add the font variations

Since none of the required font files are in your media library you’ll have to upload them all. We’ll do it one by one.

Click The Add Font Variation Button
Click The ADD FONT VARIATIONS Button.
A Screen Pops Open Where You Can Choose The Weight And Style Of The Font, As Well As Upload The Various File Variations
A Screen Pops Open Where You Can Choose The Weight And Style Of The Font, As Well As Upload The Various File Variations.
Add the WOFF file
Click The Woff File Upload Button
Click The WOFF File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Woff File And Click The Open Button
Select The WOFF File And Click The Open Button.

Wait for the file to upload.

Click The Select Woff File Button
Click The Select .woff file Button.
Add the WOFF2 file
Click The Woff2 Upload Button
Click The WOFF2 File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Woff2 File And Click The Open Button.
Select The WOFF2 File And Click The Open Button.

Wait for the file to upload.

Click The Select Woff2 File
Click The Select .woff2 file Button.
Add the TTF file
Click The Ttf Upload Button
Click The TTF File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Ttf File And Click The Open Button
Select The TTF File And Click The Open Button.

Wait for the file to upload.

Click The Select Ttf File Button
Click The Select .ttf file Button.
Add the SVG file
Click The Svg File Upload Button
Click The SVG File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Svg File And Click The Open Button
Select The SVG File And Click The Open Button.

Wait for the file to upload.

Click The Select Svg File Button
Click The Select .svg file Button.
Add the EOT file
Click The Eot File Upload Button
Click The EOT File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Eot File And Click The Open Button
Select The EOT File And Click The Open Button.

Wait for the file to upload.

Click The Select Eot File Button
Click The Select .eot file Button.
Publish your custom font

All font files have been uploaded successfully. Now it’s time to publish the font.

You’ll find the publish button to the far right of the screen.

Click The Publish Button To Publish Your Custom Font
Click The Publish Button To Publish Your Custom Font.

Using a desktop font

What if you’re not using Fontspring’s super simple way of creating web fonts for your website?

What if you come across a font on a random font website that only gives you a desktop font file?

If that’s the case you’ll need to create web fonts from that single file.

Once you’ve created the font files, you’ll download it to your computer, where’s it’s ready to be added to your Elementor-driven WordPress website using the steps outlined earlier in this tutorial.

Find a font

We’ll use a free 1001 Fonts font called Homoarakhn.

Visit 1001fonts.com/homoarakhn-font.html to download it.

The Landing Page For The Homoarakhn Font On 1001 Fonts
The Landing Page For The Homoarakhn Font On 1001 Fonts.

Download the font

Look for the big download button.

Click The Download Button
Click The Download Button.

This downloads a zip file containing the font to your computer.

Extract the font file

My Chrome downloads all files to my desktop, which means the zip file is on my desktop.

I use 7-Zip, so I’ll right-click the file, hover over the 7-Zip menu item and click on Extract Here.

I Right Click On The Zipped Folder, Hover Over 7 Zip And Click Extract Here
Right-Click On The Zipped Folder, Hover Over 7-Zip And Click Extract Here.

This extracts the zipped folder’s contents to my desktop. One of the files is the actual font, while the other one is just a text file containing licensing information.

Now we’re going to create web fonts from this single desktop font.

Upload the font

We’ll be uploading the font file to a tool called transfonter, which we use to turn the font into all the web font files required to create a custom Elementor font.

Open transfonter

Visit transfonter.org.

A Screenshot Of The Transfonter.org Website
A Screenshot Of The Transfonter.org Website.

Click Add fonts

Click The Add Fonts Button
Click The Add fonts Button.

Choose the file

My file’s on my desktop. Your’s might be elsewhere. Wherever it is, find it and upload it.

Select The File And Click The Open Button
Select The File And Click The Open Button.
The Filename Showing Just Below The Buttons
The Filename Showing Just Below The Buttons, Just In Case You Wondered Whether The File Actually Uploaded.

Create web font variants

When you first upload your custom font, the only setting that’s active is Family support.

The Settings For The Font Before Editing
The Settings For The Font Before Making Changes.

We want to make the font as compatible as possible, so we’ll activate some of the other settings.

Activate The Fix Vertical Metrics, Add Local Rule And Base64 Encode Settings, And Make Sure All Formats Are Checked
Activate The Fix Vertical Metrics, Add Local Rule And Base64 Encode Settings, And Make Sure All Formats Are Checked.

Convert the file

Now it’s time to convert your desktop font.

Click The Convert Button
Click The Convert Button.

Wait for the conversion to complete.

Click The Download Button
Click The Download Button.

You now have all the files you need to add a custom Elementor font.

Extract the font files

You want the files inside the zipped folder you just downloaded.

As stated before, my Chrome downloads files to my desktop, so I’ll find the file there and extract it.

I’m using 7-Zip for the extraction process.

Right Click On The Zipped Folder, Hover Over 7 Zip And Click Extract Here
Right-Click On The Zipped Folder, Hover Over 7-Zip And Click Extract Here.

This extracts all the fonts required for adding a custom font using Elementor, but it also extracts other files we won’t be using. Just ignore those. Once all the relevant files are uploaded you can delete everything.

Open Elementor Custom Fonts

The files are ready on the computer. Now it’s time to upload them to your WordPress website using Elementor.

In The Left Hand Sidebar, Hover Over Elementor, Then Click On Custom Fonts
In The Left Hand Sidebar, Hover Over Elementor, Then Click On Custom Fonts.

Add a new custom font

You’ll notice the custom font we uploaded earlier, as well as a handy preview of the font.

Now we’ll add yet another custom font.

Click The Add New Button
Click The Add New Button.

Give the font a name

As mentioned before, I like to give the font the original name the author gave it.

Give The Font A Name. I Like To Use The Original Font
Give The Font A Name. I Like To Use The Original Name.

Add the font variations

We’ll add the required font files one by one. Strictly speaking, we don’t need to upload all the font variations, but if we don’t our font won’t display correctly on all devices. The point of uploading all the variations is to make the font compatible with as many devices as possible.

Click The Add Font Variations Button
Click The ADD FONT VARIATIONS Button.
Add the WOFF file
Click The Woff File Upload Button
Click The WOFF File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Woff File And Click The Open Button
Select The WOFF File And Click The Open Button.

Wait for the file to upload.

Click The Select Woff File Button
Click The Select .woff file Button.
Add the WOFF2 file
Click The Woff2 Upload Button
Click The WOFF2 UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Woff2 File And Click The Open Button
Select The WOFF2 File And Click The Open Button.

Wait for the file to upload.

Click The Select Woff2 File Button
Click The Select .woff2 file Button.
Add the TTF file
Click The Ttf Upload Button
Click The TTF File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Ttf File And Click The Open Button
Select The TTF File And Click The Open Button.

Wait for the file to upload.

Click The Select Ttf File Button
Click The Select .ttf file Button.
Add the SVG file
Click The SVG File Upload Button
Click The SVG File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Svg File And Click The Open Button
Select The SVG File And Click The Open Button.

Wait for the file to upload.

Click The Select Svg File Button
Click The Select .svg file Button.
Add the EOT file
Click The EOT File Upload Button
Click The EOT File UPLOAD Button.
Click On Select Files
Click On Select Files.
Select The Eot File And Click The Open Button
Select The EOT File And Click The Open Button.

Wait for the file to upload.

Click The Select .eot File Button
Click The Select .eot file Button.

Publish your custom font

All font files are in place. Let’s publish the font.

Click The Publish Button To Publish Your Custom Font
Click The Publish Button To Publish Your Custom Font.

And that’s how you add a custom font to Elementor using a desktop font.

How to use a custom font

Now it’s time to display your custom font/s using Elementor Pro.

This can be done element-by-element or by setting global fonts.

We’ll do it both ways.

For this to work you need to have Elementor active for a WordPress page. Read my article on how to activate Elementor for a page if you’re not sure how to.

For a single element

Once you’ve activated Elementor you can continue with this step.

I’ve set up a page at test.minibigthing.com/font where you can see the results.

A Screenshot Of The Page I've Set Up With Elementor, Where We'll Use The Custom Font
A Screenshot Of The Page I’ve Set Up With Elementor, Where We’ll Use The Custom Font.

Add a heading

We’ll add a heading and change it to the script font we installed earlier.

Drag A Heading Into The Section On The Page
Drag A Heading Into The New Section On The Page.
Elementor Adds Default Heading Text As A Placeholder
Elementor Uses The Default Text, Add Your Heading Text Here, As A Placeholder.

The default heading text is a light blue color. That’s because we didn’t set any global colors. That can be tackled in another tutorial, but for now we’ll leave it as is.

Change the font family

Make sure the heading text element is still active before you take the next step.

Click The Heading Element's Style Tab
Click The Heading Element’s Style Tab.

You’ll notice a Typography setting with a little blue globe.

Click The Pencil Icon In Line With The Typography Heading
Click The Pencil Icon In Line With The Typography Heading, Next To The Globe.
This Opens A Box With Font Settings For This Specific Heading
This Opens A Box With Font Settings For This Specific Heading.
Clicking On The Current Font (in This Case, Roboto) Reveals A Dropdown Box. Start Typing The Name Of The Font Of Your Choice In This Box To See The List Update Real Time
Clicking On The Current Font Reveals A Dropdown Box. Start Typing The Name Of The Font Of Your Choice In This Box To See The List Update Real Time.
Click The Font You Want To Activate For This Heading
Click The Font You Want To Activate For This Heading.
Click Update And You'll Notice The Heading Has Changed To Your Font Of Choice
Click Update And Notice The Heading That’s Changed To Your Font Of Choice.

In this case, the heading is far too small. You can play with the size and other font elements, but we’ll leave that for another tutorial.

Using Elementor global font setting

The efficient way to handle fonts and colors in Elementor is to enable global settings.

For this section we’ll add another heading and change it to the second custom font we installed, using Elementor’s global settings.

Click The Nine Dot Menu
Click The Nine Dot Menu.

Add a heading

We’ll add another heading below the current heading.

Drag A Heading From The Sidebar Into The Section Below The Script Font Heading
Drag A Heading From The Sidebar Into The Section Below The Script Font Heading.

Change the heading level

We’re changing the heading level from H2 to H3. This is simply so we can see the change that occurs when we set a global font for H3.

Click On The H2 Heading In Line With The Html Tag Headline
Click On The H2 Heading In Line With The HTML Tag Headline.
Change The Heading To H3
Change The HTML Tag To H3.

Change the font family

Now we’ll change the font family for the H3 heading, but do so using Elementor Pro’s global settings.

Click On The Hamburger Menu In The Top Left Hand Corner
Click On The Hamburger Menu In The Top Left Hand Corner.
Enter global settings

The following step takes you to Elementor’s global settings.

Click On Site Settings
Click On Site Settings.
Click On Typography
Click On Typography.
In The Left Hand Sidebar, Scroll Down Until You Reach The H3 Heading Settings. Click On The Pencil Icon To Edit It
In The Left Hand Sidebar, Scroll Down Until You Reach The H3 Heading Settings. Click On The Pencil Icon To Edit It.

The box that pops open is exactly the same as the one that popped open when we edited the first heading.

The only difference is, any changes we make here will reflect on all H3 headings across the website.

Click On The Text That Reads Default
Click On The Text That Reads Default.
Start Typing The Name Of The Font You'd Like To Use In The Box That Opens
Start Typing The Name Of The Font You’d Like To Use In The Box That Opens.
Select The Font
Select The Font.
Click The Update Button
Click The UPDATE Button.
Exit global settings

The next step takes us back to Elementor’s page-level builder.

Click The Close Button At The Top Left Of The Screen
Click The Close Button At The Top Left Of The Screen.

View the fonts

It’s time to check what the fonts will look like to website visitors.

But there’s a problem.

If you’re running a fresh install of Elementor Pro you’ll notice the global font settings you applied to all H3 headings did not take effect.

That’s because there’s one more setting to activate.

Change Elementor’s global settings

Open your WordPress admin panel in a new browser tab. Once it’s open, take the next step.

In The Left Hand Sidebar, Hover Over Elementor And Click Settings
In The Left Hand Sidebar, Hover Over Elementor And Click Settings.
There Are Two Settings That Are Deactivated By Default: Disable Default Colors And Disable Default Fonts
There Are Two Settings That Are Deactivated By Default: Disable Default Colors And Disable Default Fonts.
Check The Disable Default Fonts Checkbox And Click The Save Changes Button
Check The Disable Default Fonts Checkbox And Click The Save Changes Button.

Your two headings should now be sporting their new custom fonts.

Your Headings Should Now Be In The Custom Font Styles Assigned Them
Your Headings Should Now Be In The Custom Font Styles Assigned Them.

In conclusion

There you have it: two ways to add custom fonts to your website using Elementor Pro.

It’s an elegant solution to use EXACTLY the font you want on your website, which could make your website stand out from the crowd.

In a future article I’ll tackle ways to add custom fonts to your WordPress website using a theme and a plugin for those who don’t use Elementor.

Sign up and stay tuned!

Leave a Reply

Your email address will not be published. Required fields are marked *

Free WordPRess tutorials

Let me help you make the most of your WordPress website and online marketing efforts.

Yes!

Latest articles

© Copyright, all rights reserved. minibigthing.com. Legal. Hosted and maintained by Bay Marketing Co.

Scroll to Top
I won't spam you and you can easily unsubscribe any time you wish.