Adding WordPress custom fonts, whether in the WordPress theme vs page builder, enhances your website’s design and branding. WordPress Custom fonts help align your site with your brand’s aesthetic, creating a unique and professional look. They improve readability and user engagement, making your content more visually appealing.
Using WordPress custom fonts also ensures consistency across devices and screen sizes. Overall, they enhance the user experience and elevate the quality of your website.
Check out our step-by-step guides to learn how to add WordPress custom fonts to both versions of Elementor. We’ll highlight the differences in the processes and share resources for free typography.
Feature of WordPress Custom Fonts
‘Custom‘ means something meticulously designed to cater to specific needs and preferences.
WordPress Custom fonts are tailor-made to meet your personal requirements and preferences, empowering you to create, customize, and refine font characteristics beyond the limitations of standard default fonts.
Craft and apply five distinct custom font formats:
- Embedded OpenType (EOT) – This font file is designed to work on Internet Explorer but may encounter compatibility issues with other browsers. Be sure to use this format to ensure support for earlier versions of Internet Explorer.
- SVG Fonts/Shapes – Utilize SVG typography as glyphs in SVG to display text, ensuring compatibility with earlier iPhone versions.
- TrueType Fonts (TTF) – This was created in the late 1980s by Apple and Microsoft.
- The Web Open Font Format (WOFF 2.0) – WOFF 2.0 offers superior compression to WOFF 1.0, supporting TrueType or OpenType.
- The Web Open Font Format (WOFF) – WOFF is unequivocally the most recommended format due to its comprehensive support in modern browsers.
The European Union has announced a new addition to the GDPR. If you’re using directly hosted Google fonts on your website, you could be in violation of GDPR rules, which will incur a 100-euro fine from Google.
To avoid this, make sure to add Google Fonts elementor locally or consider using elementor typography settings.
You can quickly enhance your website by controlling your Google fonts using the Perfmatters plugin.
Looking for WordPress Custom Fonts Free for Web Design?
Creating custom fonts from scratch requires various technical skills, including typography, design software usage, encoding, file formatting, font licensing, scripting, and automation.
However, if you’re a no-code user, you don’t need to worry about mastering these skills.
When it comes to choosing fonts, it’s crucial to use pre-designed free or premium options. There are numerous trustworthy websites where you can find incredible custom fonts.
Google Fonts, Font Squirrel, FontSpace, DaFont, and Open Foundry are among the top websites for this purpose.
You can delve into the post on the best places to acquire free fonts to learn more about these websites and access direct links.
Following that, we will guide you through the process of downloading a custom free font from DaFont.
Procedure 1: Download a Font from the DaFont Website
Explore DaFont.com and discover the perfect font for you. With a simple click, you can download your chosen font and enhance all your projects.
Procedure 2: Unzip the Downloaded File
After downloading, the font file will be in ZIP format. Remember to unzip the file and access the folder.
Please keep in mind that Elementor supports only five specific font formats and cannot be used directly with ZIP files.
Procedure 3: Find Out a Suitable Format
There are multiple formats of the downloaded font in the folder. It’s crucial to determine if any of these formats correspond to the five formats listed above. Notably, a .ttf format is present. This format will be essential for the upcoming tutorials.
Similarly, you have the ability to discover and access fonts from additional font foundries.
There’s a difference in how they are added to the free and premium versions of Elementor. The Custom feature is exclusively for premium users. However, no need to worry if you’re a free user.
You still have the option to add fonts to the free version using additional plugins. In our tutorial methods below, we’ll guide you through these processes.
How to Add Custom Fonts in Elementor
Procedure 1: Procedure to Add Custom Fonts in Elementor Free Versions
Are you looking to enhance or add typography in Website? Look no further. With the Free Fonts and Typekit plugins at your disposal, you can effortlessly achieve the look you desire. Let’s get started with the WordPress custom fonts Free plugin.
Step 1: Installation and Activation of Custom Fonts WordPress Plugin
Go to Plugins—Add New. In the search box, type Custom Fonts. Installation and Activation plugin when it appears below.
You’ll find a new menu labeled Custom Fonts in the Appearance section. Access the menu and press the Add New Font button.
Step 2: Uploading the Font and Saving Variations
Be sure to start by selecting the Local Fonts tab. Then, click the Choose File button to upload the font file you downloaded from your local drive.
Remember to upload the file in .ttf format. After that, give your font a captivating name. For example, in the image below, we named our font “Saverroot.”
You can also append other variations and see the preview on the right side. Lastly, don’t forget to click the Save Font button to finalize.
Step 3: Ensure that the font is compatible with Elementor
Make your website stand out with our simple steps:
- Navigate a post or page.
- Drag and drop the Headings or Text Editor widget.
- Update engaging text to the widget.
- Access the Style tab and open the Typography option.
- In the drop-down list next to “Family,” easily find your font by its name.
- Witness our updated font “Saverroot” prominently displayed in the list. It works like a charm!
With the WordPress Custom Fonts plugin, you have the power to append elementor typography settings seamlessly without any cost.
Additionally, the process for utilizing the Typekit Fonts plugin is just as straightforward.
Procedure 2: Procedure to Add WordPress Custom Fonts in Elementor Pro
It’s essential to have the Premium version installed and activated on your website for the Fonts function to work. Let’s dive into the tutorial now!
Step 1: Adding WordPress custom Fonts in Elementor Pro
Go to the Elementor – Custom Fonts
Welcome to our custom font creator! Press the “Add New” button to begin crafting your unique font.
Give your font a captivating title, then proceed by pressing on “Add Font Variation.”
Step 2: Adding a Font Variation & Upload Font Files
Enhance your font with annother options like font weight, style, and font files.
Easily upload a TTF font file by clicking the upload button.
Remember to have your preferred font files ready on your device before starting the upload.
Once completed, view the font details instantly.
To maintain consistency, repeat the Font File Upload process for each format. To introduce another font variation, simply click on the “Add Font Variation” button and adjust the font weight to 100.
After the upload, you can conveniently update it from the media gallery.
Step 3: Publishing the Final WordPress Custom Fonts
Update various font styles to your site and click Publish when finished.
Step 4: Utilize the WordPress Custom Fonts in your Elementor Design
You might be wondering how to use this font. To find and use the font, open any of your Elementor pages on the design panel. Then, update a text widget to the panel.
After that, update the Heading Widget to the Editing Panel.
After updating the Text widget (heading):
- Go to the Style section
- Click on Typography
- Select the font you created earlier (Saverroot).
Explore other Typography options to enhance the appearance of your text or font, such as font size, weight, transform, style, decoration, line weight, and more!
An exceptional design can captivate customers like no other. If you want to elevate your webpage’s heading to be more vibrant and captivating, this next section is for you.
Procedure 3: By Using Codes Add Elementor Pro Fonts
Discover how to enhance your site by appending font using a simple manual process.
- Create a new “fonts” folder within your theme’s directory using an FTP client or cPanel.
Ensure that the “fonts” folder is located in wp-content/themes/fonts. - Then, upload all font files to this newly created folder.
- Finally, open the theme’s stylesheet (style.css) and insert the provided code to complete the process.
@font-face {
font-family: 'nameofnewfont';
src: url("/fonts/nameofnewfont.woff2") format("woff2"),
url("/fonts/nameofnewfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
- Adding a font to your website’s elements through the stylesheet can be a bit daunting, especially for beginners.
- It involves a lot of coding for configurations such as “italics” or “bold,” and you’d have to repeat the process each time.
If you’d rather skip the technical hassle, follow the steps below to effortlessly add fonts to your site.
Customize your font using the Text Animation Widget
This awesome widget lets you easily make your text more engaging and visually appealing. It offers ten pre-built design layouts to save you time and effort.
Once updated to your design panel, simply choose a layout and customize it to fit your webpage structure.
Let’s see firsthand how you can use the Animated Text widget on your site to enhance your text or font.
Step 1: Updating Animated Text Widget
From the widget gallery, drag-drop the widget.
You will initially see the widget on the screen.
Tap the style button, go to typography, and choose My Fonts to use the text you created earlier.
Step 2: Updating Designs to Text
Go ahead and tap on the content section once again. Select the design that resonates with you the most.
After confirming the design, take the opportunity to fine-tune the animation style. Simply click on Content and locate the Animation type there. Delve into each type individually to enhance your website’s output.
Remember that the Animation delay is in milliseconds. It should be a minimum of 1000 and a maximum of 30000.
Step 3: View the animated text’s final output on the web page
Check out the end result after customizing the Animated Text widget in your font.
Transform your plain font and text with the Animated Text widget for an eye-catching display. For a detailed walkthrough of this widget, refer to the official documentation.
Bottom Line
In summary, adding WordPress custom fonts in Elementor—via the Pro version or the free plugin—enhances the look and functionality of WordPress websites. WordPress custom fonts help establish a strong brand identity and improve user experience.
They make content visually appealing and align it with branding goals, boosting professionalism, readability, and user engagement. This investment is essential for anyone wanting to create a standout online presence.