Website load time is becoming more important everyday. The internet is a competitive place and Google have been using page speed as a ranking factor for some time now.
One of the things that can slow down your website and impact performance, is your website having to load Google Fonts via a script in your website header.
A lot of website use Google Fonts and it’s common for Google Fonts to be embedded as a JavaScript script in the <head> of the website. The result is that when the website is visited, the website has to request and load the script from the Google Font library each time.
It might not seem like a big ask performance wise, but it can add 300-500 ms to your page load time and half a second is not something to be shrugged at.
Hosting fonts locally with Elementor
The alternative to requesting and loading the font from Google, is to download the font and store it on your website. This way, the fonts can be loaded from your web server and there’s no external script request required.
Elementor makes this easy, it has a Custom Fonts section built into the editor. I’m going to walk you through how to do this now.
Download your font from Google
You can download all of the Google Fonts from the Google Webfonts Helper hosted on Heroku. Simply type in the font you want to download and select the versions of the font you’d like.
Select styles
After finding your font using the search tool on the left hand menu, it’s time to select the styles of the font you want. Most websites use the following styles so I’d recommend selecting these:
- 300 (light)
- Regular (400)
- 700 (semi bold)
- 900 (extra bold)
Copy CSS
The next section provides you with the CSS necessary to apply your fonts once they’ve been uploaded to your website.
Copy this CSS and paste it in your styles.css file, accessible at Appearance > Theme Editor > Styles.css.
This step isn’t strictly necessary as Elementor will apply the fonts for you.
Customize download prefix
If you look at the custom CSS, you’ll see the URL has been autofilled by the website for you. It uses the /fonts/ prefix assuming you’ve uploaded your fonts to the fonts folder of your theme.
You can either change this prefix to something of your choosing, or make sure to create a folder called Fonts at this location /public_html/yourwebsite.com/wp-content/themes/active-theme/fonts
Once this is done, download the font clicking the big blue button.
Uploading the font
You will need cPanel or FTP access to upload the font to your website. The easiest way is to use File Manager in cPanel, which is what I will demonstrate now.
Upload your font files to the fonts folder. If you kept the CSS prefix the same, you shouldn’t need to change the URLs in your CSS.
Adding a Custom Font to Elementor
Navigate to Elementor > Custom Fonts which can be accessed from the primary CMS menu. You should see a screen like this if you click the Add New button at the top of this screen, which can be seen you scroll up.
You only need to add one font which will contain multiple variations. The variations refer to the weight of the font, remember you checked 300, 400, 700 and 900?
Each variation will have 5 files that should have all been uploaded to the fonts folder. These files are used by various different browsers to render the font.
Because we already uploaded all the fonts, what we need to do now is copy and paste the path the fonts into the URL box next to the different file types.
The template to use looks like this: https://yourwebsite.com/wp-content/themes/active-theme/fonts/filename.extension
I recommend you type it out in a text editor and then copy and paste it into the Elementor URL box as it will try to upload a new font everytime you click the box.
Add variations for each of your different font weights and include the path to the files.
Applying the custom font in Elementor
Once your font has been uploaded and registered as a custom font with Elementor, it’s time to apply the font. This means telling Elementor to use it across your website.
Access the Elementor editor from a page on your website then click the burger menu icon in the top left to reach the settings screen.
Click into Default Fonts and then proceed to change the font for your headlines or body text. If you have completed the process successfully you should see your font under Custom Fonts.
A good way to test if this is has been successful is to first apply the Google Font you want from the list of embedded Google Fonts, listed under system. Then, apply your font from the Custom Fonts screen and watch to see if the text changes at all.
Once the process is complete, you can use something like Pingdom to run a page speed test and see if Google Fonts is referenced anywhere in your results.
If you’ve followed the steps successfully, your website should no longer be loading the font by requesting it from Google, but by loading it from your server.
One Response
I currently download ttf or otf from Google Fonts and load the font files right into Elementor under Custom Fonts. Does this process have the same efficiency as what was taught in the article, by Google Webfonts Helper?