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