Shopify self-hosting & preloading fonts

Preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s onload event.

rel="preload" is a hint, a help you throw to the browser, allowing to prioritize critical assets to be loaded fast in a non blocking manner.

Words: Mircea Piturca

1. Download your fonts

If you are using Google Fonts, a good tool for downloading the fonts used is the Google Webfonts Helper. Many type foundries also give the option of downloading web font files. For this tutorial, we will be using Roboto from Google Fonts.

Select weights and download the font files

2. Host your fonts on your Shopify store.

Simply upload the font files to your Shopify files folder.
The assets folder is also an option but I find the files folder a more suitable place to keep fonts.

Upload font files

3. Create the CSS

Google Webfonts Helper will auto-generate the @font-face CSS styles for the selected fonts.

Create a file called css-fonts.liquid in your Snippets folder.
Paste the generated @font-face CSS styles.
Replace the URLs with the URLs of your Shopify hosted font files.

Note: the CSS font declarations are between <style></style> tags and we removed the query string from the Shopify hosted files URL.

Sample css-fonts.liquid


<style>
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'),
       url(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff2) format('woff2'),
       url(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff2) format('woff2'),
       url(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff) format('woff');
}
</style>

4. Include the fonts in theme.liquid

Edit the theme.liquid file located in your Layout folder and include the newly created css-fonts.liquid inside the <head></head> element:

{% include 'css-fonts' %}

5. Include the preload directive in theme.liquid

At this point you should have: fonts downloaded and uploaded to Shopify files, a Snippets/css-fonts.liquid file containing the CSS @font-face declarations

Edit theme.liquid file located in your templates folder and add the following code in inside the <head></head> element:


<link rel="dns-prefetch" href="https://cdn.shopify.com">
<link rel="preload" href="https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Note: the preload directives should be added above {% include 'css-fonts' %}. Add them early in the DOM so the browser can start the download fast