Why does Dawn prefer WOFF2 over WOFF?

WOFF2 is roughly 30% smaller than WOFF thanks to Brotli compression and is supported by 97% of browsers a Dawn store sees. WOFF2 is the format Dawn's Assistant fallback ships in. WOFF is included only when you have a meaningful long-tail of users on browsers that can't decode WOFF2.

How do I generate WOFF from a TTF for Dawn?

Use a tool like fonttools or an online converter to emit a WOFF from your TTF. Upload the result to Dawn's `assets/` folder. The generator above emits the @font-face entry that references it via Liquid's `asset_url` filter; Shopify resolves the URL at render time.

Is WOFF required for older browsers on Dawn?

Optional. WOFF covers IE11 and a sliver of legacy Android; if your visitors are on supported browsers, you can omit it without measurable harm. Dawn's analytics — assuming you've enabled them — will tell you what your actual visitor mix is. If your tier-1 traffic is exclusively modern browsers, you can drop WOFF entirely.

How do I order WOFF2/WOFF/TTF in @font-face for Dawn?

WOFF2 first, then WOFF, then TTF, OTF, and EOT. Browsers iterate the `src` list in order and stop at the first `format()` they can decode — so the smallest format a given browser supports is the one it actually downloads. The generator above always emits this order regardless of which boxes you check.

Shopify Dawn · Free, no signup · Last updated July 8, 2026

Shopify Dawn WOFF Font Code Generator

For Shopify Dawn, the WOFF entry inside @font-face uses Liquid's `asset_url` filter — `url({{ 'yourfont.woff' | asset_url }}) format('woff')` — and must appear in WOFF2 → WOFF → TTF order so browsers stop at the smallest format they understand.

WOFF is the predecessor to WOFF2 and a fallback for Internet Explorer 11 and a long tail of older Android browsers. On a Dawn store — the Shopify OS 2.0 reference theme that ships with every new store and powers the largest install base of any free theme. — adding a WOFF entry to your @font-face block is straightforward: the generator above writes the exact line, including the Liquid filter, in the correct precedence order.

Because Dawn is the baseline most stores start from, swapping the heading face is the fastest way to stop reading as a default Shopify store — pair an expressive display face for headings with a neutral, legible body face so product copy stays easy to read.

Custom font nameBecomes the @font-face font-family

Faces(1 face)

Face 1·Regular 400

WeightStyle

Formats

Filename (no extension)Leave blank to auto-generate from the font name. Set it to your exact uploaded filename if your font shipped as e.g. Calibre-Bold.woff2 — then paste Calibre-Bold here.

Each face becomes its own @font-face block. The filename field on each row defaults to a clean pattern, but you can paste the exact filename you uploaded if your foundry shipped it with a different name — no renaming required.

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

Upload your font files to the theme's assets/ folder, then paste this at the bottom of assets/base.css. Shopify's asset_url filter resolves the file paths 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

Upload your font files to the theme's assets/ folder, then paste this at the bottom of assets/base.css. Shopify's asset_url filter resolves the file paths 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 (primary custom font)",
  "settings": [
    {
      "type": "header",
      "content": "My Brand Sans typography"
    },
    {
      "type": "paragraph",
      "content": "Upload your font file (woff2) to your theme's Assets folder. The @font-face block will resolve them via {{ 'my-brand-sans.woff2' | asset_url }}."
    },
    {
      "type": "font_picker",
      "id": "my_brand_sans_heading_font",
      "label": "Native Theme Editor heading fallback (only used if you don't upload custom files)"
    },
    {
      "type": "font_picker",
      "id": "my_brand_sans_body_font",
      "label": "Native Theme Editor body fallback (only used if you don't upload custom files)"
    },
    {
      "type": "checkbox",
      "id": "my_brand_sans_use_for_both",
      "label": "Use this font for both headings and body",
      "default": true
    },
    {
      "type": "select",
      "id": "my_brand_sans_apply_to",
      "label": "Apply My Brand Sans (only used when \"Use this font for both\" is unchecked)",
      "options": [
        {
          "value": "headings",
          "label": "Headings only"
        },
        {
          "value": "body",
          "label": "Body only"
        },
        {
          "value": "both",
          "label": "Headings and body"
        },
        {
          "value": "off",
          "label": "Disabled"
        }
      ],
      "default": "both"
    },
    {
      "type": "paragraph",
      "content": "font-display strategy: swap — controls how text renders while the font file is downloading. \"swap\" is the recommended default."
    },
    {
      "type": "checkbox",
      "id": "my_brand_sans_load_woff_fallback",
      "label": "Also load WOFF fallback (legacy browsers)",
      "default": false
    }
  ]
}

Step 3: CSS variable overrides

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

:root,
[data-shopify-section],
.shopify-section {
  --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

Upload your WOFF file to Dawn's `assets/` folder.
Paste the @font-face block at the bottom of `assets/base.css`.
The generator emits the WOFF entry in the right place — after WOFF2 if you've also selected it, before TTF/OTF/EOT if you haven't.
Browsers parse each `src` line in order and stop at the first `format()` they can decode, so a correctly ordered list delivers the smallest file the visitor's browser supports.

Typography Kit

Skip straight to a finished result

Every step above, already done for you on Dawn — a proven font pairing, the install code pre-built, the licensing confirmed, and a specimen so you see it before you ship it. One-time, instant download, no account.

See the Typography Kits$19 · one-time · instant download

Frequently asked questions

Why does Dawn prefer WOFF2 over WOFF?
WOFF2 is roughly 30% smaller than WOFF thanks to Brotli compression and is supported by 97% of browsers a Dawn store sees. WOFF2 is the format Dawn's Assistant fallback ships in. WOFF is included only when you have a meaningful long-tail of users on browsers that can't decode WOFF2.
How do I generate WOFF from a TTF for Dawn?
Use a tool like fonttools or an online converter to emit a WOFF from your TTF. Upload the result to Dawn's `assets/` folder. The generator above emits the @font-face entry that references it via Liquid's `asset_url` filter; Shopify resolves the URL at render time.
Is WOFF required for older browsers on Dawn?
Optional. WOFF covers IE11 and a sliver of legacy Android; if your visitors are on supported browsers, you can omit it without measurable harm. Dawn's analytics — assuming you've enabled them — will tell you what your actual visitor mix is. If your tier-1 traffic is exclusively modern browsers, you can drop WOFF entirely.
How do I order WOFF2/WOFF/TTF in @font-face for Dawn?
WOFF2 first, then WOFF, then TTF, OTF, and EOT. Browsers iterate the `src` list in order and stop at the first `format()` they can decode — so the smallest format a given browser supports is the one it actually downloads. The generator above always emits this order regardless of which boxes you check.

Still choosing a font?

Browse the best free fonts for Shopify with performance and licensing notes, the Shopify font pairings that work, or run the 30-second typography audit to get a recommendation for your store.