Custom fonts

Learn how to integrate self-hosted custom fonts (woff/woff2) into our theme, bypassing the standard limitations of the Shopify Font Library.

While the Shopify Font Library provides a wide range of options, sometimes you need to use specific fonts to match your brand. In this guide, we’ll skip the standard Shopify font list and load your own files instead.

Usually, you’ll want to set up two: one for your headings and one for your main body text.

Important: This is an advanced tutorial that involves changing your theme's code. If you aren't comfortable making these changes yourself, feel free to contact our support team at any time for help.

1. Prepare your font files

Before starting, ensure your font files are in the .woff2 format. This is the web-optimized standard that provides the best compression and performance.

• Conversion: If you have .ttf or .otf files, use a tool like CloudConvert or Font Squirrel to convert them to .woff2.

• Naming: Rename your files to be simple and lowercase (e.g., brand-font-bold.woff2). Avoid spaces or special characters.

2. Upload Your Font Files

1. Go to your Shopify Admin → Settings → Files

2. Click Upload files and select your .woff2 files.

3. Once uploaded, click the Link icon (Copy URL) next to the file. Save these URLs in a notepad; you will need them for your CSS.

3. Remove current font references

First, from your Shopify admin, navigate to Online Store → Themes. Click the three dots (...) next to the theme you want to edit and select Edit code.

First, we need to open the config/settings_scheme.json file and remove the "Typography" block. In this way, we will not get confused if we see the ability to select fonts on our theme customizer.

A. Clean up the Theme Customizer

Open the config/settings_schema.json file. Look for the section labeled "Typography" and remove that entire block. This hides the default font pickers in your theme settings so you don't get confused later.

B. Remove the old stylesheet link

Next, open the snippets/styles-scripts.liquid file. Look for the following line and delete it (it might not be there if you are using an older version):

<link href="{{ 'fonts-additional.css' | asset_url }}" rel="stylesheet" media="print" onload="this.media='all'">

C. Clear the CSS variables

Finally, open assets/variables.css.liquid. Remove the top part of the file where the "Fonts" are loaded, as seen in the screenshot below.

Keep this file open! We are going to use it in the next step to tell Shopify to use your new custom fonts instead.

---

4. Load your custom font files

A. Add the CSS Font-Face

In the assets/variables.css.liquid file (which you should still have open), paste the following code at the very top.

Important: Make sure to replace the src: url with the specific link you copied from your Content > Files section earlier, and also the font-family property to match the name of your custom font.

Example code:

@font-face {
  font-family: "Oswald";
  src: url("https://cdn.shopify.com/s/files/1/0389/5967/7579/files/Oswald-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("https://cdn.shopify.com/s/files/1/0389/5967/7579/files/Oswald-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

B. Update the Theme Variables

Scroll down to the :root section in the same file. You need to update the font variables so the theme knows to use your new custom fonts for headings and body text.

Update your code to look like this:

Important: The --headings-font-family must match the name of your custom font that you have specified above. the sans-serif value that comes after is used as a fallback.

  --headings-font-family: Oswald, sans-serif;
  --headings-font-weight: bold;
  --headings-font-size-base: 1rem;
  --body-font-family: Oswald; 
  --bs-body-font-weight: 400;

This is how your variables.css.liquid file should look like after the changes.

---

5. Verify the changes

Finally, open your Shopify store and see if your custom fonts are loading as expected.