Shopify Origin · Free, no signup · Last updated
Shopify Origin WOFF Font Code Generator
For Shopify Origin, 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 Origin store — a furniture- and home-goods-oriented free theme built around editorial spacing and gallery-style product blocks. — 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.
Generator
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 Origin
Upload your WOFF file to Origin'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 Origin — 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.
Don't have a font yet? Creative Fabrica has 30,000+ web fonts with commercial licenses included — drop one into the @font-face block above and you're live. (affiliate)
Frequently asked questions
Why does Origin prefer WOFF2 over WOFF?
WOFF2 is roughly 30% smaller than WOFF 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. 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 Origin?
Use a tool like fonttools or an online converter to emit a WOFF 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 WOFF required for older browsers on Origin?
Optional. WOFF covers IE11 and a sliver of legacy Android; if your visitors are on supported browsers, you can omit it without measurable harm. 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 WOFF 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.