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.

Deprecated fonts in Shopify’s library

Shopify sometimes deprecates fonts in its font library as part of moving toward more open-source offerings and streamlining the catalog. If a font your store relied on is deprecated, it may disappear from the theme editor’s font picker or stop being served as before. See Deprecated fonts in Shopify’s font documentation for which typefaces are affected.

What to do: In Theme settings (or the relevant typography settings), pick another font from the current library. If you need to keep a specific look, use one of the options above—upload the files to Content → Files, use a hosted URL, or use Google Fonts—to load that typeface for Troop’s CSS variables.