Menu
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.
These are the tools you’ll need to add custom fonts to your WordPress website:
This tutorial assumes two things:
You need the following font files to ensure your custom font displays correctly in as many browsers as possible:
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.
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.
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.
Click On The Name Of The Font.
This opens the font’s landing page.
Click The Button That Reads Download Family.
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.
View Your Cart.
Click The Checkout Button.
Now wait for the system to process your order, then click the Download button.
Click The Download Button.
Click The Generate Webfont Files Button.
You’re presented with three options:
The standard option is more than sufficient for our needs.
Click The Standard Tab.
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.
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.
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 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.
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.
Now we’ll add the font.
Inside The Custom Fonts Window, Click On Add New.
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.
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 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.
Click The WOFF File UPLOAD Button.
Click On Select Files.
Select The WOFF File And Click The Open Button.
Wait for the file to upload.
Click The Select .woff file Button.
Click The WOFF2 File UPLOAD Button.
Click On Select Files.
Select The WOFF2 File And Click The Open Button.
Wait for the file to upload.
Click The Select .woff2 file Button.
Click The TTF File UPLOAD Button.
Click On Select Files.
Select The TTF File And Click The Open Button.
Wait for the file to upload.
Click The Select .ttf file Button.
Click The SVG File UPLOAD Button.
Click On Select Files.
Select The SVG File And Click The Open Button.
Wait for the file to upload.
Click The Select .svg file Button.
Click The EOT File UPLOAD Button.
Click On Select Files.
Select The EOT File And Click The Open Button.
Wait for the file to upload.
Click The Select .eot file Button.
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.
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.
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.
Look for the big download button.
Click The Download Button.
This downloads a zip file containing the font to your computer.
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.
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.
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.
Visit transfonter.org.
A Screenshot Of The Transfonter.org Website.
Click The Add fonts Button.
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.
The Filename Showing Just Below The Buttons, Just In Case You Wondered Whether The File Actually Uploaded.
When you first upload your custom font, the only setting that’s active is Family support.
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.
Now it’s time to convert your desktop font.
Click The Convert Button.
Wait for the conversion to complete.
Click The Download Button.
You now have all the files you need to add a custom Elementor font.
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.
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.
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.
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.
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 Name.
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 WOFF File UPLOAD Button.
Click On Select Files.
Select The WOFF File And Click The Open Button.
Wait for the file to upload.
Click The Select .woff file Button.
Click The WOFF2 UPLOAD Button.
Click On Select Files.
Select The WOFF2 File And Click The Open Button.
Wait for the file to upload.
Click The Select .woff2 file Button.
Click The TTF File UPLOAD Button.
Click On Select Files.
Select The TTF File And Click The Open Button.
Wait for the file to upload.
Click The Select .ttf file Button.
Click The SVG File UPLOAD Button.
Click On Select Files.
Select The SVG File And Click The Open Button.
Wait for the file to upload.
Click The Select .svg file Button.
Click The EOT File UPLOAD Button.
Click On Select Files.
Select The EOT File And Click The Open Button.
Wait for the file to upload.
Click The Select .eot file Button.
All font files are in place. Let’s publish the 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.
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.
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.
We’ll add a heading and change it to the script font we installed earlier.
Drag A Heading Into The New Section On The Page.
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.
Make sure the heading text element is still active before you take the next step.
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 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 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.
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.
We’ll add another heading below the current heading.
Drag A Heading From The Sidebar Into The Section Below The Script Font Heading.
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.
Change The HTML Tag To H3.
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.
The following step takes you to Elementor’s global settings.
Click On Site Settings.
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.
Start Typing The Name Of The Font You’d Like To Use In The Box That Opens.
Select The Font.
Click The UPDATE Button.
The next step takes us back to Elementor’s page-level builder.
Click The Close Button At The Top Left Of The Screen.
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.
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.
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.
Your two headings should now be sporting their new custom fonts.
Your Headings Should Now Be In The Custom Font Styles Assigned Them.
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!
