Why does Origin prefer WOFF2 over TTF?

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

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

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

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

Shopify Origin TTF Font Code Generator

For Shopify Origin, 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 Origin store — a furniture- and home-goods-oriented free theme built around editorial spacing and gallery-style product blocks. — 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 Origin

Upload your TTF file to Origin'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 Origin prefer WOFF2 over TTF?
WOFF2 is roughly 30% smaller than TTF thanks to Brotli compression and is supported by 97% of browsers a Origin store sees. WOFF2 is the format Origin'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 Origin?
Use a tool like fonttools or an online converter to emit a TTF from your TTF. Upload the result to Origin'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 Origin?
Optional. TTF is rarely necessary in 2025 except for niche WebView shells that don't support WOFF2. Origin'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 Origin?
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.