Shopify Studio · Free, no signup · Last updated
Studio Theme Typography CSS Variables
Studio exposes `--font-heading-family`, `--font-heading-style`, `--font-heading-weight`, and the matching `--font-body-*` tokens on `:root` — overriding them is the cleanest way to swap typography without forking core theme files.
Studio centralizes its entire typography system in six CSS custom properties on `:root`. Because an art-gallery and creative-portfolio free theme that leans on negative space and a strong vertical rhythm., every page-level heading and paragraph reads from those tokens — meaning a single override block can retarget the whole site.
Gallery and portfolio stores should let the imagery lead: a restrained editorial heading face and a quiet body face keep the typography deferential to the work on display.
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 Studio
The six tokens are: `--font-heading-family`, `--font-heading-style`, `--font-heading-weight`, `--font-body-family`, `--font-body-style`, and `--font-body-weight`.
Studio sets them in `base.css` from the values configured in the Theme Editor.
To swap them, you append a `:root { ... }` override to the bottom of `assets/base.css` — that override loads after the theme's defaults and wins by source order.
Every heading and body selector picks up the change without any template edits, and the override survives Studio updates because you're modifying values, not the cascade chain itself.
Typography Kit
Skip straight to a finished result
Every step above, already done for you on Studio — 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
Which CSS variables control typography in Studio?
Studio sets six tokens on `:root`: `--font-heading-family`, `--font-heading-style`, `--font-heading-weight`, `--font-body-family`, `--font-body-style`, and `--font-body-weight`. Heading selectors read the heading triplet, body selectors read the body triplet — there's no per-section override.
What's the difference between --font-heading-family and --font-body-family in Studio?
`--font-heading-family` is consumed by every heading-level rule. `--font-body-family` is consumed by paragraphs, list items, form copy, and the cart drawer in Studio. Setting only one lets you mix a display heading face with the theme's default body face on body — a useful split when your custom font is large.
How do I override Studio's typography without touching base.css directly?
Add a `:root { --font-heading-family: ... }` block at the bottom of `assets/base.css`. The cascade resolves the later declaration as the winner, so Studio's defaults are overridden without removing them. This pattern survives Shopify's quarterly theme updates, which often modify `base.css` but rarely touch the trailing customization region.
Will a CSS-variable typography override survive a Studio update?
Yes — provided you append the override at the bottom of `assets/base.css` rather than editing the original token declarations. Studio ships theme updates that may rewrite the `base.css` defaults, but appended override blocks are preserved as long as they live below the auto-generated section. As a hardening step, paste the override behind a clearly marked comment so future you (or a subsequent developer) recognizes it as customization.
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.