Shopify Crave · Free, no signup · Last updated
Free Shopify Crave Custom Font Generator
Paste any font name above to generate the exact @font-face CSS, settings_schema.json snippet, and CSS variable overrides Shopify Crave needs to render your custom font without layout shifts.
Crave is Shopify's snack-, beverage-, and food-brand-oriented free theme with an emphasis on tactile imagery. Out of the box, Crave ships with the theme's default heading face for headings and the theme's default body face for body — typography that's deliberately playful, slightly oversized headings that complement appetite-appeal photography. If you need a brand-specific face on a food & beverage Crave store, this generator builds the three code blocks Shopify expects in seconds.
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
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 Crave
Upload your custom font files to your Crave theme's `assets/` folder.
Paste the generated @font-face block into the bottom of `assets/base.css` so Shopify's Liquid `asset_url` filter resolves correctly.
Add the settings_schema.json snippet to expose a Theme Editor toggle for non-technical merchants.
Finally, the CSS variable overrides retarget .product__title, .marquee__text and every other element that reads from `--font-heading-family` or `--font-body-family` — meaning your custom face propagates site-wide without touching Crave's core templates.
Frequently asked questions
How do I add a custom font to the Shopify Crave theme?
Upload your font files to Crave's `assets/` folder, paste the @font-face block this generator outputs into the bottom of `assets/base.css`, and override `--font-heading-family` and `--font-body-family` to point at your font name. Crave reads those tokens for every typography rule, so the swap propagates instantly.
What font formats does Crave support for custom uploads?
Crave supports WOFF2, WOFF, TTF, OTF, and EOT — anything the browser can decode. WOFF2 is the only format you strictly need on a modern store; the others are legacy fallbacks. The generator orders them WOFF2 → WOFF → TTF so each browser stops at the smallest file it understands.
Will a custom font cause layout shift on Crave?
Not if you set `font-display: swap` (the generator does this automatically) and reserve typography metrics by overriding Crave's CSS variables instead of swapping fonts via JavaScript. Crave's headings — .product__title, .marquee__text — read from `--font-heading-family`, so the override happens before paint and the metric box doesn't change after load.
Do I need to edit Liquid to use a custom font on Crave?
Only once. The @font-face block goes into the bottom of `assets/base.css`, which is CSS, not Liquid. The optional settings_schema.json block is JSON. The only Liquid in play is Shopify's `{{ 'yourfont.woff2' | asset_url }}` filter inside the @font-face, which resolves to the public URL of the file you uploaded.
Can I use Google Fonts with Crave instead of self-hosting?
Crave already supports Google Fonts via the Theme Editor's font picker, but that route is limited to fonts in Shopify's curated catalog. Self-hosting your own WOFF2 unlocks any face — including paid foundry fonts you've licensed — and avoids the third-party request that Google Fonts adds to every page load.