Use a custom font

This is an advanced customization. We always recommend working off a duplicated version of your theme and consulting a Shopify developer if you're unsure. Please ensure you have the correct font license before using a custom font.

Primavera comes with access to Shopify's font library. If you wish to use a custom font instead, you will need to edit the theme code.

Depending on how you've sourced the font, choose from one of the following options:

• Option 1: Upload a font file (Preferred)

• Option 2: Load a font from an external provider

Option 1: Upload a font file (Preferred)

If you have a font file, you can follow these steps:

1. Ensure you have the font file in woff2 format (older formats may work but for this article we'll use woff2 ; you can use a free online converter if needed)

2. In your Shopify store, navigate to Content/Settings > Files

3. Upload the font file; once uploaded, copy the link

4. Plan how you're going to add the custom CSS: If you're making minor tweaks and it's important that you're able to update the theme without a developer, try to use Theme settings > Custom CSS. If you're heavily extending the theme, the next best option may be to use a custom CSS file. See our general recommendations here.

5. In your custom CSS, add the @font-face property and replace the values as needed:

@font-face {
  font-family: "FONT_NAME";
  src: url("COPIED_FILE_LINK") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

1. Still in your custom CSS, below the @font-face declaration, add the following snippet and remove/replace variables and values as needed:

:root {
  /* Override the body font */
  --font-body-family: "FONT_NAME", sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;
  
  /* AND/OR override the heading font */
  --font-heading-family: "FONT_NAME", sans-serif;
  --font-heading-weight: 700;
  --font-heading-style: normal;
}

1. Save your changes

Example

Say we want to use Google Fonts Philosopher 400 for the body font and Philosopher 700 Italic for the heading font. It's the same font family, but we'll need to upload two files, one for each font weight/style combination.

1. We first upload both font files in woff2 format to Content/Settings > Files

2. We then add @font-face declarations for each font weight/style combination in our custom CSS:

@font-face {
  font-family: "Philosopher";
  src: url("COPIED_FILE_LINK_PHILOSOPHER_400") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Philosopher";
  src: url("COPIED_FILE_LINK_PHILOSOPHER_700_ITALIC") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

1. Finally, in our custom CSS, below the @font-face declarations, we add the following snippet:

:root {
  /* Override the body font */
  --font-body-family: "Philosopher", sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;

  /* Override the heading font */
  --font-heading-family: "Philosopher", sans-serif;
  --font-heading-weight: 700;
  --font-heading-style: italic;
}

Option 2: Load a font from an external provider

If you're embedding fonts from an external provider such as Google Fonts or Adobe Fonts, you may have been given a code snippet that loads the font from their own URLs.

For example, here's the Google Fonts embed code for Cal Sans:

<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap" rel="stylesheet">

Here are the steps to load a font from an external provider:

1. Open the Code editor

2. Locate and open the file theme.liquid

3. Paste your embed code just above the closing </head> tag and hit Save

4. Plan how you're going to add the custom CSS: If you're making minor tweaks and it's important that you're able to update the theme without a developer, try to use Theme settings > Custom CSS. If you're heavily extending the theme, the next best option may be to use a custom CSS file. See our general recommendations here.

5. In your custom CSS, add the following snippet and remove/replace variables and values as needed. Note: Replace "FONT_NAME" with the exact font family name referenced by the external provider, for example "Cal Sans".

   :root {
     /* Override the body font */
     --font-body-family: "FONT_NAME", sans-serif;
     --font-body-weight: 400;
     --font-body-style: normal;
     
     /* AND/OR override the heading font */
     --font-heading-family: "FONT_NAME", sans-serif;
     --font-heading-weight: 700;
     --font-heading-style: normal;
   }

6. Save your changes

Example

Say we want to use Google Fonts Philosopher 400 for the body font and Philosopher 700 Italic for the heading font. That means we only need to add a single line of embed code to theme.liquid , since it already includes both weights and styles:

<link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;1,700&display=swap" rel="stylesheet">

1. We start by adding the above embed code in theme.liquid , above the closing <head> tag

2. Then, in our custom CSS, we add the following code:

:root {
  /* Override the body font */
  --font-body-family: "Philosopher", sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;

  /* Override the heading font */
  --font-heading-family: "Philosopher", sans-serif;
  --font-heading-weight: 700;
  --font-heading-style: italic;
}

Optional: Preloading your font

To improve performance, you may wish to consider preloading your font. Please note, this involves modifying the core theme files and may make it more difficult for you to upgrade Primavera in the future. We suggest only doing this if you are already committed to customizing other areas of the code base.

To add a preload, add the following code to the head tag:

<link rel="preload" href="FILE NAME" as="font" type="font/woff2" crossorigin>