Shopify Origin · Free, no signup · Last updated
Add a Custom Font to Shopify Origin with Liquid
On Shopify Origin, 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 Origin is mostly a CSS task — the only Liquid you need is the one-liner that Shopify uses to resolve uploaded asset paths. Because Origin is a furniture- and home-goods-oriented free theme built around editorial spacing and gallery-style product blocks. you can drop the @font-face block directly into the bottom of `assets/base.css` and skip every snippet file.
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 Origin
In your Origin 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 Origin's heading selectors (including .section__heading, .product-description) inherit the new face automatically.
Typography Kit
Skip straight to a finished result
Every step above, already done for you on Origin — 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.
Don't have a font yet? Creative Fabrica has 30,000+ web fonts with commercial licenses included — drop one into the @font-face block above and you're live. (affiliate)
Frequently asked questions
Where do I paste the @font-face block in Origin?
the bottom of `assets/base.css`. Origin 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 Origin?
When Origin'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 Origin?
No. Origin'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 Origin?
Set `--font-heading-family` only and leave `--font-body-family` untouched. Origin's heading selectors — including .section__heading, .product-description — read from the heading token, while paragraph and form copy continue to use the body token and the theme's default body face.