How Custom Fonts Impact Performance

What is the most efficient way to load your fonts in Bigcommerce Stencil themes? There are three different ways to add fonts to a theme

1. using an @import at-rule in css
2. adding a reference to a font, like a Google font, in your base.html file via a <link> tag
3. adding a font to WebDAV and adding a @font-face source in your base.html file.

Let’s go over the benefit of each and the impact on page speed you can expect. We’ll be comparing mobile speeds only as the vast majority of internet traffic is done through a mobile device.

Let’s start by looking at the @import at-rule. Using the @import allows you to import code from other valid stylesheets. For example, if we visit this url for the Montserrat font from Google Fonts, you can see valid css that you can import in your own theme. The benefit to using @import is that you can wrap them in media queries. Is there a font you only want on mobile? Wrap it inside a media query and that font will only be visible on mobile. @import tends to be slower than <link> on mobile devices. On average, @import is 18% slower than using a <link> tag and 20% faster than using WebDAV. If you don’t need to load a custom font on specific screen sizes only, it is not recommended to use @import.

One of the main benefits to using a <link> tag to load in custom fonts is the ability to preconnect (if you’re using Google Fonts, for example). Using preconnect allows a browser to connect to the requested origin before the page loads, which speeds up the download process of the custom font. Using a <link> also allows the browser to download multiple fonts in parallel instead of sequentially (which is how @import works). This gives you the power to download multiple fonts at the same time! Comparing mobile speed, using a <link> tag is 18% faster than @import on average, and 48% faster than using WebDAV on average. This makes a <link> tag the most preferred way as it’s the fastest download speed of any option we cover in this article.

If loading custom fonts using WebDAV is so much slower than the other options, why even use it? Well, if you’re going to use a font from Google then it doesn’t really make much sense to download the font and load it via WebDAV when you have the ability to add it via @import or a <link> tag. What do you do when you have a custom font, but it isn’t available on Google or somewhere similar? If you need to load a custom font that is downloaded to your machine, then you can place it in your /content/ folder in WebDAV and load it via a <style> tag in your base.html file.