Shopify Dawn · Free, no signup · Last updated
Shopify Dawn WOFF2 Font Code Generator
For Shopify Dawn, the WOFF2 entry inside @font-face uses Liquid's `asset_url` filter — `url({{ 'yourfont.woff2' | asset_url }}) format('woff2')` — and must appear in WOFF2 → WOFF → TTF order so browsers stop at the smallest format they understand.
WOFF2 is the modern, Brotli-compressed format that every browser shipped after 2015 can decode — and the only format you actually need on a current Shopify store. 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 WOFF2 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 Dawn
Upload your WOFF2 file to Dawn's `assets/` folder.
Paste the @font-face block at the bottom of `assets/base.css`.
The generator emits the WOFF2 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.
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 Dawn prefer WOFF2 over WOFF2?
WOFF2 is roughly 30% smaller than WOFF2 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. WOFF2 is included only when you have a meaningful long-tail of users on browsers that can't decode WOFF2.
How do I generate WOFF2 from a TTF for Dawn?
Use a tool like fonttools or an online converter to emit a WOFF2 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 WOFF2 required for older browsers on Dawn?
Required for ~97% of modern traffic — never skip it. 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 WOFF2 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.