-
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
-
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
-
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>
-
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' %}
-
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

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.
Written by Mircea Piturca, Sat, Jan 05, 19