How can I locally store a Google Font on Shopify?

Store Design
1

Hi everybody,

due to new law regulations: Does anybody know how I can locally store a Google Font for Shopify?

I uploaded the woff and woff2 files to the assets. Then I added the code to theme.css mentioning which parts I want to be written in the google fonts. Don’t really know, what’s missing, it’s still not locally stored :disappointed_face:

/DM SANS/

@font-face {
font-family: “dm-sans-v11-latin-regular”;
src: url(“dm-sans-v11-latin-regular.woff2”) format(“woff2”),
url(“dm-sans-v11-latin-regular.woff”) format(“woff”);
}

body,h1,h3,h5,h6,p,blockquote,li,a,.hero__inner .page-width.text-center .h1.mega-title ,.feature-row .feature-row__item.feature-row__text.feature-row__text–left .h3 ,.hero__inner .page-width.text-center .h1.mega-title ,.product-card__title { font-family: “dm-sans-v11-latin-regular”!important; }

Thank you and best regards

Denise

2

See https://sections.design/blogs/shopify/preloading-fonts:

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 the font 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 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 element:

{% render ‘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 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 {% render ‘css-fonts’ %}. Add them early in the DOM so the browser can start the download fast.

3 Likes
3

Thank you so much @tomfox , this was the best explanation I’ve read regarding this topic!

I think I’m too stupid :grinning_face_with_smiling_eyes: I dowloaded the fonts, uploaded to the files, generated the cssfonts.liquid and edited the theme liquid. I also changed the link rel files… And now I have this :grinning_face_with_smiling_eyes:
whyyyyyyyy :disappointed_face: :disappointed_face:

4

@tomfox So happy. I implemented everything, but it still shows me that it’s not locally hosted :disappointed_face:

Bildschirmfoto 2022-09-02 um 11.02.36.png
Bildschirmfoto 2022-09-02 um 11.02.36.png1262×342 194 KB

5

you have to delete them in the ::root in your css as well anything that says something like Settings.type is calling from some base font

1 Like
6

Hi @chumani ,

Try to follow this video instead. For some reason, sometimes the font does not show correctly when uploading the font in the Asset folder. If that does not work, proceed to the second solution posted on the blog

1 Like
7

Hello,
thank you very much for this step by step plan.
Im struggling to find our which google font is not locally saved.
It shows just this:

Do you know how to proceed?