Shopify Craft · Free, no signup · Last updated
Free Shopify Craft Custom Font Generator
Paste any font name above to generate the exact @font-face CSS, settings_schema.json snippet, and CSS variable overrides Shopify Craft needs to render your custom font without layout shifts.
Craft is an artisan- and maker-leaning free theme that pairs natural product photography with curated typography. Out of the box, Craft ships with the theme's default heading face for headings and the theme's default body face for body — typography that's deliberately transitional serif headings paired with low-contrast body for craft-shop authenticity. If you need a brand-specific face on a artisan & handmade Craft 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 Craft
Upload your custom font files to your Craft 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, .testimonial__quote and every other element that reads from `--font-heading-family` or `--font-body-family` — meaning your custom face propagates site-wide without touching Craft's core templates.
Frequently asked questions
How do I add a custom font to the Shopify Craft theme?
Upload your font files to Craft'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. Craft reads those tokens for every typography rule, so the swap propagates instantly.
What font formats does Craft support for custom uploads?
Craft 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 Craft?
Not if you set `font-display: swap` (the generator does this automatically) and reserve typography metrics by overriding Craft's CSS variables instead of swapping fonts via JavaScript. Craft's headings — .product__title, .testimonial__quote — 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 Craft?
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 Craft instead of self-hosting?
Craft 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.