Shopify Crave · Free, no signup · Last updated
Add a Custom Font to Shopify Crave with Liquid
On Shopify Crave, custom fonts are wired up by uploading the file to `assets/`, then referencing it inside an @font-face block via the Liquid `asset_url` filter — no Liquid template edits required.
Adding a custom font to Crave is mostly a CSS task — the only Liquid you need is the one-liner that Shopify uses to resolve uploaded asset paths. Because Crave is Shopify's snack-, beverage-, and food-brand-oriented free theme with an emphasis on tactile imagery. you can drop the @font-face block directly into the bottom of `assets/base.css` and skip every snippet file.
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
In your Crave theme's code editor, navigate to `assets/` and upload your WOFF2 (and any fallbacks).
Open the file at the bottom of `assets/base.css` and paste the @font-face block from the generator above.
The crucial detail is the Liquid filter `{{ 'yourfont.woff2' | asset_url }}` — Shopify rewrites this at render time to the actual CDN URL for the asset, including a cache-busting hash.
Reference that font-family from anywhere in your stylesheet, or — preferred — override `--font-heading-family` so all of Crave's heading selectors (including .product__title, .marquee__text) inherit the new face automatically.
Frequently asked questions
Where do I paste the @font-face block in Crave?
the bottom of `assets/base.css`. Crave loads that file before any section-level CSS, so the @font-face declaration is registered in time for every page that follows.
How does Liquid's asset_url filter work inside an @font-face on Crave?
When Crave's stylesheet is rendered server-side, Shopify replaces `{{ 'yourfont.woff2' | asset_url }}` with the absolute CDN URL of the uploaded file. The browser then sees a normal CSS `url(...)` call. This is why the @font-face block must live in a `.css.liquid` or a stylesheet served through Liquid, never in a static `.css` file outside Shopify's pipeline.
Do I need to edit any Liquid templates to install a custom font on Crave?
No. Crave's typography reads from `--font-heading-family` and `--font-body-family` CSS variables, which means a stylesheet override is enough. You only edit Liquid templates if you want to gate the font behind a Theme Editor toggle, in which case you wire it through `settings_schema.json`.
How do I scope the font to only headings on Crave?
Set `--font-heading-family` only and leave `--font-body-family` untouched. Crave's heading selectors — including .product__title, .marquee__text — read from the heading token, while paragraph and form copy continue to use the body token and the theme's default body face.