Where do I paste the @font-face block in Studio?

the bottom of `assets/base.css`. Studio loads that file before any section-level CSS, so the @font-face declaration is registered in time for every page that follows.

How does Liquid's asset_url filter work inside an @font-face on Studio?

When Studio's stylesheet is rendered server-side, Shopify replaces `{{ 'yourfont.woff2' | asset_url }}` with the absolute CDN URL of the uploaded file. The browser then sees a normal CSS `url(...)` call. This is why the @font-face block must live in a `.css.liquid` or a stylesheet served through Liquid, never in a static `.css` file outside Shopify's pipeline.

Do I need to edit any Liquid templates to install a custom font on Studio?

No. Studio's typography reads from `--font-heading-family` and `--font-body-family` CSS variables, which means a stylesheet override is enough. You only edit Liquid templates if you want to gate the font behind a Theme Editor toggle, in which case you wire it through `settings_schema.json`.

How do I scope the font to only headings on Studio?

Set `--font-heading-family` only and leave `--font-body-family` untouched. Studio's heading selectors — including .gallery__caption, .collection__title — read from the heading token, while paragraph and form copy continue to use the body token and the theme's default body face.

Shopify Studio · Free, no signup · Last updated May 6, 2026

Add a Custom Font to Shopify Studio with Liquid

On Shopify Studio, custom fonts are wired up by uploading the file to `assets/`, then referencing it inside an @font-face block via the Liquid `asset_url` filter — no Liquid template edits required.

Adding a custom font to Studio is mostly a CSS task — the only Liquid you need is the one-liner that Shopify uses to resolve uploaded asset paths. Because Studio is an art-gallery and creative-portfolio free theme that leans on negative space and a strong vertical rhythm. you can drop the @font-face block directly into the bottom of `assets/base.css` and skip every snippet file.

Custom font nameBecomes the @font-face font-family

Formats

WOFF2 covers ~97% of modern traffic. Add WOFF / TTF only if you need legacy fallbacks.

WeightStyle

Apply to

Controls which Dawn typography roots the CSS variable block overrides.

Live preview

Add to cart · Free shipping · 30-day returns

Drop a WOFF2 / WOFF / TTF file here to preview your actual font. The file stays in your browser — nothing is uploaded.

Paste these three blocks in order. They're independent files in your theme — copying one without the others won't break the store.

Step 1: @font-face CSS

Paste at the bottom of assets/base.css. Uses Liquid's asset_url filter — Shopify resolves the path at render time.

@font-face {
  font-family: "My Brand Sans";
  src: url({{ 'my-brand-sans.woff2' | asset_url }}) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Step 1: @font-face CSS

Paste at the bottom of assets/base.css. Uses Liquid's asset_url filter — Shopify resolves the path at render time.

@font-face {
  font-family: "My Brand Sans";
  src: url({{ 'my-brand-sans.woff2' | asset_url }}) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Step 2: settings_schema.json

Adds a Theme Editor section so non-technical merchants can toggle the font on or off.

{
  "name": "My Brand Sans (custom font)",
  "settings": [
    {
      "type": "header",
      "content": "My Brand Sans typography"
    },
    {
      "type": "paragraph",
      "content": "Upload your My Brand Sans files (woff2, woff, ttf, otf, or eot) to your theme's Assets folder. The @font-face block referencing my-brand-sans.* will then resolve via {{ 'my-brand-sans.woff2' | asset_url }}."
    },
    {
      "type": "font_picker",
      "id": "my_brand_sans_heading_font",
      "label": "Heading font (fallback when custom file is unavailable)",
      "default": "assistant_n4"
    },
    {
      "type": "font_picker",
      "id": "my_brand_sans_body_font",
      "label": "Body font (fallback when custom file is unavailable)",
      "default": "assistant_n4"
    },
    {
      "type": "select",
      "id": "my_brand_sans_apply_to",
      "label": "Apply My Brand Sans",
      "options": [
        {
          "value": "headings",
          "label": "Headings only"
        },
        {
          "value": "body",
          "label": "Body only"
        },
        {
          "value": "both",
          "label": "Headings and body"
        },
        {
          "value": "off",
          "label": "Disabled"
        }
      ],
      "default": "both"
    },
    {
      "type": "checkbox",
      "id": "my_brand_sans_load_woff_fallback",
      "label": "Also load WOFF fallback (legacy browsers)",
      "default": false
    }
  ]
}

Step 3: CSS variable overrides

Retargets Dawn's --font-heading-family / --font-body-family. Survives theme updates.

:root {
  --font-heading-family: "My Brand Sans", sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-family: "My Brand Sans", sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
}

How to use this on Studio

In your Studio theme's code editor, navigate to `assets/` and upload your WOFF2 (and any fallbacks).
Open the file at the bottom of `assets/base.css` and paste the @font-face block from the generator above.
The crucial detail is the Liquid filter `{{ 'yourfont.woff2' | asset_url }}` — Shopify rewrites this at render time to the actual CDN URL for the asset, including a cache-busting hash.
Reference that font-family from anywhere in your stylesheet, or — preferred — override `--font-heading-family` so all of Studio's heading selectors (including .gallery__caption, .collection__title) inherit the new face automatically.

Frequently asked questions

Where do I paste the @font-face block in Studio?
the bottom of `assets/base.css`. Studio loads that file before any section-level CSS, so the @font-face declaration is registered in time for every page that follows.
How does Liquid's asset_url filter work inside an @font-face on Studio?
When Studio's stylesheet is rendered server-side, Shopify replaces `{{ 'yourfont.woff2' | asset_url }}` with the absolute CDN URL of the uploaded file. The browser then sees a normal CSS `url(...)` call. This is why the @font-face block must live in a `.css.liquid` or a stylesheet served through Liquid, never in a static `.css` file outside Shopify's pipeline.
Do I need to edit any Liquid templates to install a custom font on Studio?
No. Studio's typography reads from `--font-heading-family` and `--font-body-family` CSS variables, which means a stylesheet override is enough. You only edit Liquid templates if you want to gate the font behind a Theme Editor toggle, in which case you wire it through `settings_schema.json`.
How do I scope the font to only headings on Studio?
Set `--font-heading-family` only and leave `--font-body-family` untouched. Studio's heading selectors — including .gallery__caption, .collection__title — read from the heading token, while paragraph and form copy continue to use the body token and the theme's default body face.