The Elementor integration with Google Fonts makes it easy for users to search for free fonts and implement them on a page effortlessly. While the approach looks great when it comes to workflow, different story goes for site performance. When you apply a certain font from Google Fonts to your page, the actual font file is not stored to your server. Instead, the font is saved to the Google CDN server and loaded from it.
Hosting your fonts on a third-party server is not the best practice when it comes to site performance as it can add extra request. Instead, you can upload your font files to your own server to reduce the amount of HTML requests on your website. Elementor (Elementor Pro more precisely) allows you to upload custom font files and use them on your design. This post will show you how to do so.
Using Local Fonts in Elementor
As stated above, the ability to add custom font is only available on Elementor Pro. So, make sure you already have Elementor Pro on your website before getting started. Once you are ready, go to Elementor -> Settings on your WordPress dashboard. Open the Advanced tab and find the Google Fonts option and disable it. Don’t forget to click the Save Changes button to apply the change.
Next, go to Elementor -> Custom Fonts on your WordPress and add a new custom font by clicking the ADD NEW button.
Give your font a name and click the ADD FONT VARIATION button to upload your font file.
Click the UPLOAD button on a font format (make sure to select the format according to your font format) and select your file. If your font consists of several variations (e.g., italic, bold, etc.,), make sure to upload them all. Once done, click the Publish button.
That’s it. You have successfully uploaded your font to your own server.
Now, try to edit a page with Elementor and add a widget that contains a text (e.g., Heading). Go to the Style tab on the settings panel and click the pencil icon on the Typography option and you should see the font you have just uploaded. Google Fonts should not be available as well.
How to Check Where Your Fonts are Hosted
In case you are not convinced whether the fonts on your page are really hosted on your server instead of Google server, you can use the Google Fonts Checker from Font Plugins. Visit the website and paste your page URL to the available field and click the Check Website button.
If you see the following output, it means your fonts are still hosted on the Google server.
Conversely, if you see the following output, it means that there no connection with Google Fonts. Meaning that the font files are hosted on your server.
You can take a look at the analysis results to find out the path of the font files on your server.
Summary
Elementor is a page builder plugin for WordPress that makes it easy for you to create pages on your website. It is integrated with Google Fonts to make it easy for you to apply a font from Google Fonts effortlessly. No extra setup is required.
Using a font hosted on the Google server is not the best practice when it comes to site optimization, though. Instead, you can use a local font to reduce the number of HTML requests. Elementor allows you to use a local font, which you can utilize to reduce the number of HTML requests on your website.
In Elementor itself, you can create a page from scratch or start from free Elementor templates. The latter option is great to save you time.
