Shopify Spotlight · Free, no signup · Last updated
Add a Custom Font to Shopify Spotlight with Liquid
On Shopify Spotlight, 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 Spotlight is mostly a CSS task — the only Liquid you need is the one-liner that Shopify uses to resolve uploaded asset paths. Because Spotlight is a video- and motion-forward free theme for fashion, audio, and entertainment brands. you can drop the @font-face block directly into the bottom of `assets/base.css` and skip every snippet file.
Fashion and entertainment stores can push cinematic display sizing for headings to match hero video, but keep the body face simple so the drama stays in the imagery, not the paragraph text.
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
Upload your font files to the theme's assets/ folder, then paste this at the bottom of assets/base.css. Shopify's asset_url filter resolves the file paths 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
Upload your font files to the theme's assets/ folder, then paste this at the bottom of assets/base.css. Shopify's asset_url filter resolves the file paths 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 (primary custom font)",
"settings": [
{
"type": "header",
"content": "My Brand Sans typography"
},
{
"type": "paragraph",
"content": "Upload your font file (woff2) to your theme's Assets folder. The @font-face block will resolve them via {{ 'my-brand-sans.woff2' | asset_url }}."
},
{
"type": "font_picker",
"id": "my_brand_sans_heading_font",
"label": "Native Theme Editor heading fallback (only used if you don't upload custom files)"
},
{
"type": "font_picker",
"id": "my_brand_sans_body_font",
"label": "Native Theme Editor body fallback (only used if you don't upload custom files)"
},
{
"type": "checkbox",
"id": "my_brand_sans_use_for_both",
"label": "Use this font for both headings and body",
"default": true
},
{
"type": "select",
"id": "my_brand_sans_apply_to",
"label": "Apply My Brand Sans (only used when \"Use this font for both\" is unchecked)",
"options": [
{
"value": "headings",
"label": "Headings only"
},
{
"value": "body",
"label": "Body only"
},
{
"value": "both",
"label": "Headings and body"
},
{
"value": "off",
"label": "Disabled"
}
],
"default": "both"
},
{
"type": "paragraph",
"content": "font-display strategy: swap — controls how text renders while the font file is downloading. \"swap\" is the recommended default."
},
{
"type": "checkbox",
"id": "my_brand_sans_load_woff_fallback",
"label": "Also load WOFF fallback (legacy browsers)",
"default": false
}
]
}Step 3: CSS variable overrides
Retargets the theme's --font-heading-family / --font-body-family. Survives theme updates.
:root,
[data-shopify-section],
.shopify-section {
--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 Spotlight
In your Spotlight 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 Spotlight's heading selectors inherit the new face automatically.
Typography Kit
Skip straight to a finished result
Every step above, already done for you on Spotlight — a proven font pairing, the install code pre-built, the licensing confirmed, and a specimen so you see it before you ship it. One-time, instant download, no account.
Frequently asked questions
Where do I paste the @font-face block in Spotlight?
the bottom of `assets/base.css`. Spotlight 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 Spotlight?
When Spotlight'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 Spotlight?
No. Spotlight'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 Spotlight?
Set `--font-heading-family` only and leave `--font-body-family` untouched. Spotlight's heading selectors read from the heading token, while paragraph and form copy continue to use the body token and the theme's default body face.
Still choosing a font?
Browse the best free fonts for Shopify with performance and licensing notes, the Shopify font pairings that work, or run the 30-second typography audit to get a recommendation for your store.