Adding Custom Fonts

Use Google Fonts or your own font files instead of the fonts in Shopify's font library.

Overview

By default the theme uses two font families: one for headings and one for body text. The body font is also loaded in bold, italic, and bold italic, so the theme loads five font files:

  • Heading font, in the chosen weight and style
  • Body font, regular
  • Body font, bold
  • Body font, italic
  • Body font, bold italic

To use other fonts, load them in Theme settings → Advanced → Custom liquid <head> and point the theme's font CSS variables to them. The steps below cover Google Fonts and your own font files.

Adding Google Fonts

Steps

  1. Get the embed code from Google Fonts. For the heading font, one style is enough. For the body font, include Regular, Italic, Bold and Bold Italic.
  2. Add the embed code to Theme settings → Advanced → Custom liquid <head>.
  3. Change the font families, styles and weights in the <style> code below to match your fonts.
  4. Add the updated <style> code after the embed code in the same field.
  5. For better performance, turn off the theme's own fonts by choosing a system font in Theme settings → Typography → Heading font and Body font.

Example of the Custom liquid <head> value:

<!-- GOOGLE FONT EMBED CODE -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">

<!-- STYLES FOR THE CUSTOM GOOGLE FONTS -->
<style>
  :root {
    --font-body-family: "Josefin Sans", sans-serif;
    --font-body-style: normal;
    --font-body-weight: 300;

    --font-heading-family: "Bungee Spice", sans-serif;
    --font-heading-style: normal;
    --font-heading-weight: 400;
  }
</style>

Adding your own font files

Steps

  1. Upload the font files in Content → Files in your Shopify admin. Name the files after the font's weight and style. WOFF2 is the recommended file format.
  2. Add a preload link for each uploaded file to Theme settings → Advanced → Custom liquid <head> (step 2 in the sample below).
  3. Add an @font-face rule for each file in the same field (step 3).
  4. Point the theme's font CSS variables to your fonts (step 4).
  5. Choose a system font in Theme settings → Typography → Heading font and Body font, so the theme doesn't load font files you don't use.

Example of the Custom liquid <head> value:

<!-- Step 2 -->
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Heading-bold.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Light.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Bold.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Italic.woff2' | file_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" fetchpriority="high" href="{{ 'ABCProphet-Body-Bold-Italic.woff2' | file_url }}" type="font/woff2" crossorigin>

<style>
  /* Step 3 */
  @font-face {
    font-family: 'Prophet Heading'; /* Match the family name. Don't include the font weight in the name. */
    font-weight: 700; /* Match the font weight */
    font-style: normal; /* normal or italic */
    font-display: swap;
    src: url("{{ 'ABCProphet-Heading-bold.woff2' | file_url }}") format("woff2");
  }
  @font-face {
    font-family: 'Prophet Body';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("{{ 'ABCProphet-Body-Light.woff2' | file_url }}") format("woff2");
  }
  @font-face {
    font-family: 'Prophet Body';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("{{ 'ABCProphet-Body-Bold.woff2' | file_url }}") format("woff2");
  }
  @font-face {
    font-family: 'Prophet Body';
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src: url("{{ 'ABCProphet-Body-Italic.woff2' | file_url }}") format("woff2");
  }
  @font-face {
    font-family: 'Prophet Body';
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url("{{ 'ABCProphet-Body-Bold-Italic.woff2' | file_url }}") format("woff2");
  }

  /* Step 4 */
  :root {
    --font-body-family: 'Prophet Body', sans-serif;
    --font-body-style: normal;
    --font-body-weight: 300;
    --font-heading-family: 'Prophet Heading', sans-serif;
    --font-heading-style: normal;
    --font-heading-weight: 700;
  }
</style>

Font CSS variables

--font-body-family, --font-body-style and --font-body-weight set the body text, and --font-heading-family, --font-heading-style and --font-heading-weight the headings. Bold and italic body text use the same family with font-weight: 700 and font-style: italic, which is why each of those needs its own @font-face rule.

Related articles