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

the bottom of `assets/base.css`. Dawn 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 Dawn?

When Dawn'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 Dawn?

No. Dawn'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 Dawn?

Set `--font-heading-family` only and leave `--font-body-family` untouched. Dawn's heading selectors — including .section-header__heading, .product__title — read from the heading token, while paragraph and form copy continue to use the body token and Assistant.

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

Add a Custom Font to Shopify Dawn with Liquid

On Shopify Dawn, 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 Dawn is mostly a CSS task — the only Liquid you need is the one-liner that Shopify uses to resolve uploaded asset paths. Because Dawn is the Shopify OS 2.0 reference theme that ships with every new store and powers the largest install base of any free theme. 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 Dawn

In your Dawn 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 Dawn's heading selectors (including .section-header__heading, .product__title) inherit the new face automatically.

Frequently asked questions

Where do I paste the @font-face block in Dawn?
the bottom of `assets/base.css`. Dawn 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 Dawn?
When Dawn'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 Dawn?
No. Dawn'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 Dawn?
Set `--font-heading-family` only and leave `--font-body-family` untouched. Dawn's heading selectors — including .section-header__heading, .product__title — read from the heading token, while paragraph and form copy continue to use the body token and Assistant.