Why does Refresh prefer WOFF2 over WOFF?

WOFF2 is roughly 30% smaller than WOFF thanks to Brotli compression and is supported by 97% of browsers a Refresh store sees. WOFF2 is the format Refresh's system 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 Refresh?

Use a tool like fonttools or an online converter to emit a WOFF from your TTF. Upload the result to Refresh'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 Refresh?

Optional. WOFF covers IE11 and a sliver of legacy Android; if your visitors are on supported browsers, you can omit it without measurable harm. Refresh'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 Refresh?

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 Refresh · Free, no signup · Last updated May 7, 2026

Shopify Refresh WOFF Font Code Generator

For Shopify Refresh, 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 Refresh store — a sport- and energy-leaning free theme tuned for high-saturation imagery and bold supporting copy. — 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.

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 Refresh

Upload your WOFF file to Refresh'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.

Frequently asked questions

Why does Refresh prefer WOFF2 over WOFF?
WOFF2 is roughly 30% smaller than WOFF thanks to Brotli compression and is supported by 97% of browsers a Refresh store sees. WOFF2 is the format Refresh's system 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 Refresh?
Use a tool like fonttools or an online converter to emit a WOFF from your TTF. Upload the result to Refresh'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 Refresh?
Optional. WOFF covers IE11 and a sliver of legacy Android; if your visitors are on supported browsers, you can omit it without measurable harm. Refresh'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 Refresh?
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.