You can use your custom fonts for your Shopify shop

If you want to add a font to our theme through the Shopify admin, then you should store your font in the Files section of the Shopify admin. Shopify doesn’t encourage users to upload font files to theme’s assets folders.

To use your custom fonts, it must be webfont meaning its file format must be .woff or .woff2. If your font package doesn’t include those file format, you can use free webfont converter such as font squirrel

Make sure that you’ve valid license to use those as webfonts

Once you’ve font files ready, you can follow below steps,

1. Upload the font files to the Content > Files section of the Shopify admin.

Now you should go to Themes -> Edit code and find the file custom.css under assets, click this css file or Go to Theme Settings -> Custom CSS & add the following css lines

@font-face {
  font-family: "YOUR CUSTOM FONT NAME";
  src: url('YOUR CUSTOM FONT URL') format("woff2"),
       url('YOUR CUSTOM FONT URL') format("woff");
}

Now, you can replace YOUR CUSTOM FONT NAME with your font name & YOUR CUSTOM FONT URL with font file url.

Tip: You can find exact font file url inside Content > Files in your Shopify admin. So you can open files in separate tab for reference.

Applying the font

Now you can apply the added font to your Headings, Body, etc… For this again, go to Themes -> Edit code and find the file custom.css under assets, click this css file add the following css lines

:root{
  --theme-body-font-family: "YOUR CUSTOM FONT NAME", serif;
  --theme-heading-font-family: "YOUR CUSTOM FONT NAME", serif;
  --theme-special-font-family: "YOUR CUSTOM FONT NAME", serif;
}

Above code will apply to all theme placements where theme considers as Headings, Body, Special elements.

If you want to apply fonts directly to headings, paragraphs, body. you can use following css

h1, h2, h3, h4, h5, h6{
  font-family: "YOUR CUSTOM FONT NAME", serif;
}
body{
  font-family: "YOUR CUSTOM FONT NAME", serif;
}