Add a custom font

You can add a custom font in one of three ways:

1. Upload a file in Content -> Files
2. Use a public URL to a hosted font file (for example, .woff2, .woff, .ttf, or .otf)
3. Use a font from Google Fonts

Set up a Custom liquid block

In the theme editor, add a Custom liquid section at the top of the header group.

In that section’s settings, set Spacing above, Spacing below, and the mobile spacing options to None so the block does not add extra space.

The steps below use this same Custom liquid block for the font code.

Option 1: Upload a font file

1. In the Shopify admin, open Content -> Files and use Upload files to add your font (for example, custom-font.woff2).

2. After upload, note the file name as it was uploaded including the file extension. You will use that exact name in the next step.

In the Custom liquid block, paste the following. Set custom_font_family to your font’s name, and set custom_font_file to the file name noted prior. The file should be name.extension (for example, my-font.woff2).

{%- liquid
  assign custom_font_family = 'Merchant Custom Sans'
  assign custom_font_fallback = 'sans-serif'
  assign custom_font_file = 'custom-font.woff2'
-%}

<style>
  @font-face {
    font-family: {{ custom_font_family }};
    src: url('{{ custom_font_file | file_url }}') format('{{ custom_font_file | split: "." | last | downcase }}');
    font-display: swap;
  }

  :root {
    --font--heading--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--nav--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--paragraph--family: {{ custom_font_family }}, {{ custom_font_fallback }};
  }
</style>

Click Save in the theme editor to apply the changes.

Option 2: Use a URL to a hosted font

Use this when the font file is on a server or CDN and you have a direct https://… link to the file.

In the Custom liquid block, paste the following. Set custom_font_family to your font’s name, and set custom_font_url to the full https://… address, with a path to the file like https://example.com/fonts/custom-font.woff2.

{%- liquid
  assign custom_font_family = 'Merchant Custom Sans'
  assign custom_font_fallback = 'sans-serif'
  assign custom_font_url = 'https://example.com/fonts/custom-font.woff2'
-%}

<style>
  @font-face {
    font-family: {{ custom_font_family }};
    src: url('{{ custom_font_url }}') format('{{ custom_font_url | split: "?" | first | split: "/" | last | split: "." | last | downcase }}');
    font-display: swap;
  }

  :root {
    --font--heading--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--nav--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--paragraph--family: {{ custom_font_family }}, {{ custom_font_fallback }};
  }
</style>

Click Save in the theme editor to apply the changes.

Option 3: Use Google Fonts

In the Custom liquid block, paste the following.

{%- liquid
  assign custom_font_family = 'Oi'
  assign custom_font_fallback = 'sans-serif'
  assign custom_font_url = 'https://fonts.googleapis.com/css2?family=Oi&display=swap'
-%}

<style>
  @import url('{{ custom_font_url }}');
  :root {
    --font--heading--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--nav--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--paragraph--family: {{ custom_font_family }}, {{ custom_font_fallback }};
  }
</style>

On Google Fonts, pick a font, open Get embed code, and copy the stylesheet link that looks like https://fonts.googleapis.com/css2?family=...&display=swap. Set custom_font_url in the snippet to that link. Set custom_font_family to the font’s name as given on the site, replacing the example Oi values if you use a different font.

Click Save in the theme editor to apply the changes.