When building our website on WordPress, one of the many options we are presented with is fonts. Themes and page builders like Elementor come with the bundle of web fonts created by Google, which according to statistics from BuiltWith, are in 45% of the top 10,000 websites and globally, they amount to over 35 quadrillion views (at the time of this writing, of course. You can check the analytics here). But what if we want to customize our design with font families not developed by Google? What if we don’t want our website to look like the rest of them font-wise?
Enter custom web fonts. These are the fonts we find in sites like Dafont, Linotype or Fonts.com. We display these web fonts to our visitors by installing hosting them on our server, something that for the not tech-savvy user, was a pain in the ass before.
Today, I’m going to talk about the benefits of using custom web fonts, and how Elementor has made it easier for users to install and use them on their website.
Suggested reading: The three best themes for Elementor websites
Ok, So What Exactly Are Web Fonts?
Let’s start this guide by explaining the term web fonts. There are two types of fonts we see when we visit someone else’s WordPress website; web safe fonts or web fonts.
- Web safe fonts are those that come already installed on a device. You know, the ones you see when you open Microsoft Word (if you’re on Windows) or Pages (if you’re on a Mac). Some examples of web safe fonts include Arial, Times New Roman, and Courier New as well as generic font families like serif, sans-serif, and monospace. On the other hand, you have;
- Web fonts, which are the opposite. These fonts are not pre-installed on a device and users’ browsers must download them before displaying them. All the fonts of sites that I mentioned before (Dafont, Linotype, Google fonts) are good examples of web fonts.
Now, with web fonts, there are two ways you can use them. If you decide to use custom web fonts purchased from libraries, you have to download the files and host them on your server by going to your cPanel and installing them, then writing CSS code (there’s another way with Elementor but more on that below). On the other hand, if you’re using Google Fonts or Adobe Fonts, all you need to do is link to them by inserting a line of code in the <head> of your website and then referring to them in the CSS. In the case of Google Fonts, like I mentioned, most themes and page builders already do this.
Are there any benefits to using custom fonts?
You may be wondering: Why would I choose to use custom fonts if I can select the Google Fonts in Elementor?
And that’s a valid question. Sometimes, it may be a hassle to go through what can be considered a time-consuming process when you already have beautiful fonts at your disposal. But, there are some big advantages to using custom fonts:
- Wider Selection of Fonts. There is truth to the fact that both Google Fonts and Adobe Fonts are huge libraries, but you can’t compare them to font shops where you have fonts by the thousands.
- No dependency on 3rd party-services. When you use custom fonts on your website, you remove the reliance on external services, which can go down at any time, making your site default to a web safe font. That’s not a good look for you.
- Better for caching purposes. In my speed optimization guide, one of the tools I mentioned for measuring your site speed was GTMetrix. When you test a site via this platform, a common error that you might see using Google fonts or another 3rd party service is related to the resources, in that they are missing a cache validator or that they require expires headers. This error is something that’s managed at the server level, and by using custom fonts on your server, you have complete control over this.
- Less requests, faster loading. Staying on the speed side of things, the fonts you host locally because they’re on your server, makes less requests than compared to a third party service. When you use Google Fonts, there are additional requests; one fonts.googleapis.com to grab the CSS file and others to grab the font files.
Having gone over what web fonts are, the difference between custom local web fonts and 3rd party ones, plus the benefits you get by using the former, let’s move over to the good stuff: how you can use them in your Elementor website.
Adding custom fonts on Elementor
Once you buy a font, you usually get a .zip file with four different types of font file formats; TTF, EOT, WOFF, WOFF2. That’s all you need to install fonts on Elementor.
Note: If you have different types of file formats, you should look to convert them, using resources like Font Squirrel, Everything Fonts or Web Font Generator.
Go to Elementor > Custom Fonts then add new.
Next, you upload the file to its respective file type. Then name the font and hit publish.
NOTE: With fonts that have a variety of weight and style, you’re going to have to individually upload by clicking ‘Add Font Variation’ and setting the weight and style from there under the same font. (if it’s the same font.)
Now that the font is uploaded, all you have to do is head over to the page and add a widget with text. It can be the text editor, heading, button, etc.
Just head in to the style tab > typography and select the custom font you’ve uploaded from there.
And that’s it! Your custom font is there for you to use at any part of your site!
Now that you know how to use custom fonts on Elementor, I think we can all agree it makes the process of installing and using them super simple. So, now you can look for the fonts that you think may go best with your brand and use them without any issues or technical code stuff. My recommendation, however, is not to go overboard with this and only install that you’re definitely certain that you’re going to use, so that you don’t strain your server or CDN.
What do you think? Are you comfortable using Google Fonts or would you prefer using custom web fonts?