Local WebFonts vs CDN: Which One Is Better For You?

In this article, we’re going to take a look at how to enhance your Avada website’s compliance with global privacy laws such as the GDPR, as well as increase the performance of your pages.

The Avada WordPress theme provides various tools to improve the performance and privacy of your site. One of these tools is the ability to change the way web fonts are loaded. Under the “Privacy” tab in Avada’s theme options, you see an option to switch between “Local” and “CDN” modes.

When you choose CDN mode, a typical page request follows the following process:

• The browser requests the page and gets the content
• A link to an external website to get the fonts assets is detected and the browser starts the process to get the external assets
• The browser performs a handshake request to the remote server (in this case the Google Fonts API or the Fonts-Awesome API). This handshake validates the security of the server and in an essential part of the way HTTPS works
• Once the handshake is successful, the browser performs a second request to the remote server to get the files
• The browser downloads the files and continues rendering the page.

When you choose Local mode, a typical page request follows the following process:

• The browser requests the page and gets the content
• A link to the font-files is detected. Since the link refers to assets stored on your website, a handshake is not required.
• The browser downloads the files and continues rendering the page.

When it comes to disk-space, the CDN method has a clear advantage. The fonts’ assets are not saved on your web server. The files are small in size, usually no more than a few kilobytes each. If your site is hosted on a cheap shared hosting solution where disk space is minimal, it might be a factor you want to consider.

Avada’s performance is something our development team is continually working on, and depending on your hosting environment, you may want to choose Local over CDN modes for your web fonts. CDNs are extremely good at quickly serving the assets they are hosting. They are optimized for performance since that is the only thing they do: serve static assets.

However, this is where things get a little more complicated. As we saw above, when using a CDN, the browser has to perform additional handshake requests to external servers for improved security. As a result, it takes twice as much time to get to the point where the browser is ready to download the web font files. If your visitors are on a slow connection or using an older mobile device, that process can be time-consuming.

Alternatively, your server can never be as fast as a large CDN. So a good rule of thumb is this: If your site is on an extremely slow host, prefer using a CDN for your web fonts, otherwise prefer using the Local mode.

Privacy is where the Local method shines. For each request, a browser makes, the recipient server receives information about the user. Their location (if they are not using a VPN), the browser they are using, their operating system, and other details. As a result, when using a CDN, these external servers get information about your visitors.

However, when using the Local mode, no data is transmitted to these external servers because the assets get served from your Avada web server. If you are conscious about your users’ privacy and privacy legislation such as the GDPR, then Local mode is a clear winner.

If your Avada WordPress website is not for a local community and you are addressing a global audience, you should keep in mind that some countries block access to domains. For example, Chinese residents don’t have access to Google services – including Google Fonts. In this case, we strongly recommend you use the Local mode. The fonts can be hosted on your web server and will then be available to everyone, in all parts of the world.

If you are building an Avada website on a cheap web server and you’re addressing a local community, with no privacy concerns, choose CDN. In most other cases, Local mode would be a better fit for your website.