Shopify Dawn vs Crave · Free, no signup · Last updated
Dawn vs Crave: Custom Font Setup Compared
Both Dawn and Crave expose the same six `--font-heading-*` and `--font-body-*` CSS variables, so the @font-face block and CSS variable override generated above paste cleanly into either theme — the only material difference is the default Assistant vs the theme's default heading face fallback.
Dawn is the Shopify OS 2.0 reference theme that ships with every new store and powers the largest install base of any free theme. Crave is Shopify's snack-, beverage-, and food-brand-oriented free theme with an emphasis on tactile imagery. Despite the different positioning, both themes are OS 2.0 and inherit Dawn's typography token convention — meaning the workflow to add a custom font is essentially identical. The differences are in defaults, fallback metrics, and which heading selectors each theme ships — but the override block you paste is identical.
Whether you're running a general-purpose store on Dawn or a food & beverage store on Crave, the typography goal is the same: a distinctive heading face that signals your category, paired with a body face legible enough for product and checkout copy.
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 vs Crave
For a side-by-side migration: paste the same @font-face block into the bottom of `assets/base.css` on Dawn and into the bottom of `assets/base.css` on Crave.
The CSS variable override block is byte-identical between the two — both themes read `--font-heading-family` and `--font-body-family` from `:root`.
The settings_schema.json snippet is also portable: Dawn and Crave both honor `font_picker` and `select` types in the Theme Editor.
Where the themes diverge is in their default fallback faces (Dawn uses Assistant; Crave uses the theme's default body face), so check that your custom face's `size-adjust` matches well enough that any swap is invisible.
Typography Kit
Skip straight to a finished result
Every step above, already done for you on Dawn vs Crave — 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.
Frequently asked questions
Which is easier to customize fonts on, Dawn or Crave?
Equally easy. Both Dawn and Crave are OS 2.0 themes that read typography from CSS custom properties on `:root`, so the override block this site generates works on either with no edits. The "easier" theme is whichever you already have installed.
Do Dawn and Crave use the same CSS variable names for typography?
Yes. `--font-heading-family`, `--font-heading-style`, `--font-heading-weight`, and the matching `--font-body-*` triplet are identical across Dawn and Crave. The variable convention is inherited from Dawn, which both themes derive from.
Can I move a custom-font setup from Dawn to Crave?
Yes — copy your asset files into Crave's `assets/` folder, paste the same @font-face block into the bottom of `assets/base.css`, and append the same CSS variable override. The only file-path detail to double-check is whether you used the `asset_url` filter (you should have); if so, Shopify rewrites the path correctly on the new theme automatically.
Which theme has better typography defaults out of the box, Dawn or Crave?
Subjective and audience-dependent. Dawn's neutral, low-contrast humanist sans that prioritizes legibility over personality. Crave's playful, slightly oversized headings that complement appetite-appeal photography. If your brand is more expressive, the food & beverage positioning of Crave probably aligns better. If you're in a general-purpose space, Dawn sets a closer baseline.
Still choosing a font?
Browse the best free fonts for Shopify with performance and licensing notes, the Shopify font pairings that work, or run the 30-second typography audit to get a recommendation for your store.