Fonts play a key role in defining your website’s visual identity. Elementor gives you complete design freedom, and adding a custom font can make your website truly unique. Whether you’re using Elementor Pro or the free version, you can easily upload and use your favorite fonts to enhance your branding and improve performance.
In this guide, we’ll walk you through how to add custom fonts in Elementor Pro and Elementor Free, along with tips on optimizing your page speed.
Why Add Custom Fonts in Elementor?
By default, Elementor integrates with Google Fonts, which offers hundreds of free typefaces. However, loading fonts from Google’s servers can slow down your website, especially when tested on PageSpeed Insights.
Every time a visitor opens your website, Google Fonts need to be fetched from external sources — this increases load time and impacts Core Web Vitals.
Using custom fonts stored locally (on your server) allows your site to:
- Load fonts faster
- Reduce third-party requests
- Improve your overall PageSpeed score
- Create a consistent, branded look
How to Add Custom Font in WordPress Elementor Pro
Elementor Pro users can easily upload and manage custom fonts without using extra plugins.
Step-by-Step Guide:
1. Login to WordPress Dashboard
Go to your website’s admin area (yourdomain.com/wp-admin).
2. Navigate to Elementor
Head over to Elementor → Custom Fonts.
3. Add New Font
Click “Add New” and give your font a name (e.g., “MyBrand Font”).
4. Upload Font Files
Upload your font in any one of the formats like: .woff, .woff2, .ttf, .svg, .eot
Tip: The
.woff2format is most optimized for modern browsers.
5. Publish and Use
Once uploaded, click Publish.
Now open any Elementor page → select a text widget → go to Style → Typography → Family → search for your new font.
Your custom font is now available globally across Elementor widgets.
How to Add Custom Font in WordPress Elementor Free
If you’re using the free version of Elementor, you won’t find the built-in custom font feature. But don’t worry — you can still achieve it using a plugin.
Step-by-Step Method Using a Plugin
1. Install the “Custom Fonts” Plugin
Go to Plugins → Add New and search for Custom Fonts.
Install and activate the plugin.
2. Upload Your Font Files
After activation, navigate to Appearance → Custom Fonts.
Click Add New Font and upload your font files (.woff, .ttf, etc.).
3. Assign Font Name & Variations
Add font weights like Regular (400), Bold (700), or Italic as needed.
4. Use Custom Font in Elementor Free
Open the Elementor editor → select any text element → under Style → Typography, your newly uploaded font will appear in the list.
Now you can design using your custom typography — even without Elementor Pro!
Google Fonts vs Custom Fonts: Which is Better for Performance?
| Feature | Google Fonts | Custom Fonts |
| Hosting | Hosted on Google’s servers | Hosted on your own site |
| PageSpeed Impact | Slightly slower due to external requests | Faster as fonts load locally |
| Control | Limited | Full customization |
| Privacy | Depends on Google’s CDN | 100% under your control |
If speed and privacy matter, custom fonts are the better choice.
They help reduce the “Render-blocking resources” warning in PageSpeed Insights and improve LCP (Largest Contentful Paint) metrics.
Tips for Using Custom Fonts in Elementor
- Compress fonts before uploading using online tools like Font Squirrel.
- Use only the weights you need (avoid unnecessary bold/italic variations).
- Always use the .woff2 format for optimal performance.
- Test your site on Google PageSpeed Insights after adding the font to confirm improvements.
Final Verdict
Adding custom fonts in Elementor — whether Pro or Free — is an easy yet powerful way to boost your site design and performance.
- Elementor Pro users can upload fonts directly in the dashboard.
- Elementor Free users can use the free Custom Fonts plugin to achieve the same.
By hosting fonts locally, you’ll enhance brand consistency, improve load time, and optimize your SEO performance — all while making your WordPress site stand out.
FAQs
Can I add Google Fonts locally in Elementor?
Yes! You can download your preferred Google Fonts and upload them as custom fonts to serve locally, improving speed.
What is the best font format for Elementor?
.woff2 is the most modern and optimized font format, supported by all major browsers.
Do custom fonts affect SEO?
Indirectly, yes. Faster loading times and better Core Web Vitals from using custom fonts can improve your SEO rankings.
Can I use Adobe Fonts in Elementor?
Yes, with Elementor Pro you can connect Adobe Fonts (Typekit) directly through the integrations panel.
