Shopify self-hosting & preloading fonts

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.

  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.
    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 querystring 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 the 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 ealry in the DOM so the browser can start the download fast

Written by Mircea Piturca, Sat, Jan 05, 19