Why does Refresh prefer WOFF2 over TTF?

WOFF2 is roughly 30% smaller than TTF 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. TTF is included only when you have a meaningful long-tail of users on browsers that can't decode WOFF2.

How do I generate TTF from a TTF for Refresh?

Use a tool like fonttools or an online converter to emit a TTF 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 TTF required for older browsers on Refresh?

Optional. TTF is rarely necessary in 2025 except for niche WebView shells that don't support WOFF2. 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 TTF 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 6, 2026

Shopify Refresh TTF Font Code Generator

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

TTF is the uncompressed desktop format — useful as a last-resort fallback and for some embedded webviews that haven't kept pace with WOFF2. On a Refresh store — a sport- and energy-leaning free theme tuned for high-saturation imagery and bold supporting copy. — adding a TTF 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 TTF file to Refresh's `assets/` folder.
Paste the @font-face block at the bottom of `assets/base.css`.
The generator emits the TTF 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 TTF?
WOFF2 is roughly 30% smaller than TTF 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. TTF is included only when you have a meaningful long-tail of users on browsers that can't decode WOFF2.
How do I generate TTF from a TTF for Refresh?
Use a tool like fonttools or an online converter to emit a TTF 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 TTF required for older browsers on Refresh?
Optional. TTF is rarely necessary in 2025 except for niche WebView shells that don't support WOFF2. 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 TTF 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.