Shopify Trade · Free, no signup · Last updated
Free Shopify Trade Custom Font Generator
Paste any font name above to generate the exact @font-face CSS, settings_schema.json snippet, and CSS variable overrides Shopify Trade needs to render your custom font without layout shifts.
Trade is a hardware-, B2B-, and trade-goods free theme designed around dense catalogs and multi-variant products. Out of the box, Trade ships with the theme's default heading face for headings and the theme's default body face for body — typography that's deliberately utilitarian sans typography that prioritizes scannability over personality. If you need a brand-specific face on a B2B & hardware Trade 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 Trade
Upload your custom font files to your Trade 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, .variant-table__cell and every other element that reads from `--font-heading-family` or `--font-body-family` — meaning your custom face propagates site-wide without touching Trade's core templates.
Frequently asked questions
How do I add a custom font to the Shopify Trade theme?
Upload your font files to Trade'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. Trade reads those tokens for every typography rule, so the swap propagates instantly.
What font formats does Trade support for custom uploads?
Trade 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 Trade?
Not if you set `font-display: swap` (the generator does this automatically) and reserve typography metrics by overriding Trade's CSS variables instead of swapping fonts via JavaScript. Trade's headings — .product__title, .variant-table__cell — 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 Trade?
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 Trade instead of self-hosting?
Trade 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.