Shopify Studio · Free, no signup · Last updated
Free Shopify Studio Custom Font Generator
Paste any font name above to generate the exact @font-face CSS, settings_schema.json snippet, and CSS variable overrides Shopify Studio needs to render your custom font without layout shifts.
Studio is an art-gallery and creative-portfolio free theme that leans on negative space and a strong vertical rhythm. Out of the box, Studio ships with the theme's default heading face for headings and the theme's default body face for body — typography that's deliberately editorial display headings with restrained body copy that defers to imagery. If you need a brand-specific face on a art & gallery Studio 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 Studio
Upload your custom font files to your Studio 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 .gallery__caption, .collection__title and every other element that reads from `--font-heading-family` or `--font-body-family` — meaning your custom face propagates site-wide without touching Studio's core templates.
Frequently asked questions
How do I add a custom font to the Shopify Studio theme?
Upload your font files to Studio'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. Studio reads those tokens for every typography rule, so the swap propagates instantly.
What font formats does Studio support for custom uploads?
Studio 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 Studio?
Not if you set `font-display: swap` (the generator does this automatically) and reserve typography metrics by overriding Studio's CSS variables instead of swapping fonts via JavaScript. Studio's headings — .gallery__caption, .collection__title — 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 Studio?
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 Studio instead of self-hosting?
Studio 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.