The post How to Add Custom Fonts to WordPress with Elementor appeared first on PluginsForWP.
]]>If so, you came to the right place.
Although Elementor is already pre-loaded with various fonts, we can still add a custom one to differentiate ourselves from other websites.
This tutorial will show you how to add a custom font to your WordPress website using the powerful Elementor page builder plugin.
Why to Use a Custom Font?
Custom fonts are a powerful tool for bolstering brand identity and creating a unique visual style.
They offer designers creative freedom to tailor typography, enhancing aesthetic and thematic coherence.
Custom fonts are optimized for screen readability and support web accessibility. They distinguish designs, increasing memorability and impact in a sea of standard fonts.
They ensure consistency across diverse media, reinforcing brand integrity. Exclusive designs cater specifically to brand requirements, promoting uniqueness.
Moreover, custom fonts afford designers greater control over licensing and usage rights, ensuring legal compliance.
Ultimately, custom fonts elevate visual identity, enrich user experience, and amplify design impact.
How to Add Custom Fonts to WordPress With Elementor
Elementor Pro simplifies the process of adding custom fonts to WordPress.
While it’s still possible to manually upload custom fonts to WordPress, it is way easier with Elementor.
Before learning how to add the custom font to WordPress, you must have it downloaded to your local computer.
There are plenty of websites from which you can download fonts, such as DaFont and 1001freefonts.
Once you found your desired font, click on the Download button.
Then, follow the steps below to add custom fonts to WordPress with Elementor:
-
The file will be downloaded as .zip, and you must unzip it first to access the font file.
-
After extracting the file, enter it into its folder to access the font file (usually TTF, but it can also be WOFF, WOFF2, SVG, and EOT)
-
In your WordPress dashboard, navigate to Elementor -> Custom Fonts and click the Add New button.
-
Enter the Font Family name (match it with the font name), and click the Add Font Variation button.
-
Then, click on the Upload button next to the font format (the format you downloaded) and add it.
-
Click Publish to make your custom font available to use.
Once you publish the font, we should test it to ensure it’s working correctly.
Therefore, click the Edit with Elementor button to open the visual editor screen.
Then, choose the element you want to change (usually a title) and expand the typography tab.
Expand the Font Family dropdown list and search for the custom font you added.
The title’s font will change accordingly after selecting your new custom font, which indicates it works correctly.
Finally, update the changes and visit the live site to ensure the new custom font is active and visible.
Conclusion
WordPress and Elementor come with hundreds of pre-loaded fonts for us to use. However, sometimes, they don’t have the one we want.
Custom fonts are a great way to build a brand story and character.
Therefore, this tutorial showed you how to add your favorite custom font to Elementor to enrich your business and brand recognition.
The post How to Add Custom Fonts to WordPress with Elementor appeared first on PluginsForWP.
]]>