The use of fonts is absolutely necessary for building a website. While there are several ways to use them, certain methods can result in an unwanted extra loading times for our website.
Below, we’ll explain how and why it’s recommended to load fonts on WordPress sites using Elementor. However, these methods can be useful with other builders, such as the Bricks site builder. By doing this, we can achieve performance improvements of up to 90%.
Let’s get started by using Google Web Fonts as an example, one of the leading font sources today. The steps we follow below don’t necessarily need to be based on fonts from this site.
There are three ways to upload fonts to your website:
- Embed the code for your chosen font from Google Web Fonts in your site’s header.
- Choose the desired font from the list of available fonts in the builder (e.g., Elementor).
- Install your fonts locally.
There are two main reasons why you shouldn’t load fonts using methods 1 and 2 in the list above. The first is that these methods aren’t compatible with Europe’s GDPR (General Data Protection Regulation) because Google collects information from our sites when using their fonts this way. The second reason to be careful with these loading methods is performance. For these reasons, option 3 is recommended. In Elementor, you just need to access the WordPress dashboard and go to “Elementor > Custom Fonts” to load the font you want.
To get the font we want, simply search for the one we like on Google Web Fonts and download it.
When choosing fonts, it’s important to consider that having more than two or three different types of variants isn’t necessary for a website. Furthermore, within each font, there may be many more variants than we actually need.
Let’s take the Lato font, for example. We can see that it has a large number of variants, such as thin, light, regular, bold, and black. It’s unlikely that if our design has a balanced use of fonts, we’ll use all of its variants. For example, if we’ve used Lato in its Regular and Bold versions, we’ll only need to download and install those files. Installing all the others would put an extra load on our website, so we recommend loading a maximum of five types.
Once the fonts have been downloaded, there are some considerations to keep in mind to ensure our website’s performance.
As we see in the image above, Elementor will allow us to upload fonts in up to 5 different formats, but each of them has a different implication, and this is where we need to pay attention.
EOT (Embedded OpenType)
This is a font format created to be embedded in web pages, primarily for older versions of Internet Explorer (IE 6-8). Because these are such old browsers, they’re likely not useful for much of your traffic, so it doesn’t make sense to sacrifice performance with this format.
SVG (Scalable Vector Graphics)
The SVG format isn’t dedicated to fonts, but rather to icons and glyphs. A useful example of this format would be “fontawesome,” an icon library, but its use is still unusual. Fonts in this format can be cumbersome and thus affect website performance.
TTF (TrueType Font)
This is a classic, old-school format that has been used for a long time. Its advantage is that it’s well supported and most devices can render it without issue. Its main problem is its size. It’s precisely for this reason that the formats listed below were developed.
WOFF (Web Open Font Format)
This format was Google’s solution to reducing the size of TTF files, resulting in better performance. All modern browsers, some older ones, and even Android support this format.
WOFF 2 (Web Open Font Format 2)
While similar to the aforementioned format, this one offers better compression quality, which will undoubtedly impact the performance and loading times of the website where it is used. The limitation of this format is that it is not supported by as many devices/browsers as its predecessor.
Now that we understand the characteristics of these different formats, which ones should we choose?
We consider both formats, WOFF and WOFF2, to be ideal. WOFF2 is used because of its lightweight nature, and WOFF serves as a backup in case the user’s browser doesn’t support the former.
Below, we share the contrast between a site with fonts in TTF and WOFF formats. In the first case, the page weight is 878kb, while in the second, with fonts optimized for performance, the site weight drops to 565kb, a more than considerable difference.
When converting TTF files downloaded from Google Web Fonts, we recommend using the Font Squirrell font generator with the following settings. If you encounter any issues with this converter, you can search for other converters online that offer fewer options but are easier to use.
Leave a Reply