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.

By Johannes
WordPress
Elementor
Published: Oct 13, 2020
Last edited: Oct 22, 2020

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

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.

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.

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.

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. 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.

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.

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.

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.

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.

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.

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.

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, 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.

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.

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.

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

Wait for the file to upload.

Add the WOFF2 file

Wait for the file to upload.

Click The Select Woff2 File Button — Click The *Select .woff2 file* Button.

Add the TTF file

Wait for the file to upload.

Add the SVG file

Wait for the file to upload.

Add the EOT file

Wait for the file to upload.

Publish your custom font

All font files are in place. Let’s publish the 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, Next To The Globe.

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 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.

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.

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.

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.

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.

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.

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.

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.

0 0 vote

Article Rating

0 Comments

Inline Feedbacks

View all comments