Free, no signupShopify OS 2.0

Does your store look like every other Shopify store?

It's usually the fonts — most stores never change the theme default, so they all read the same. Take the free 30-second typography audit and see exactly what's making your store look stock, plus the one change that fixes it.

assets/base.css

@font-face {
  font-family: "Söhne";
  src: url({{ 'söhne.woff2' | asset_url }}) format('woff2');
  font-weight: 400;
  font-display: swap;
}

CLS< 0.05
·
LCP< 2.5s
·
Zero JS shipped to your store

Take the 30-second audit I already know my font

No upload — files stay in your browser
Works on Dawn, Sense, Refresh, and 10 more
Pure CSS output — no JS in your store

Updated June 19, 2026 · Built for Shopify Dawn 14Verify on PageSpeed

Verify the “no upload” claim in DevTools → Network: dropping a font file makes zero requests.

30-second typography audit

1 / 4

Which Shopify theme is your store on?

This tells us your stock font and where the fix goes.

On a paid or custom theme? Pick the closest — the diagnosis is the same.

Already picked your font? Generate the install code

Paste a font name and copy three error-free blocks — the @font-face CSS, the settings_schema.json snippet, and the CSS-variable override — tailored to Shopify Dawn and every other OS 2.0 theme. The implementation step, free.

Custom font nameBecomes the @font-face font-family

Faces(1 face)

Face 1·Regular 400

WeightStyle

Formats

Filename (no extension)Leave blank to auto-generate from the font name. Set it to your exact uploaded filename if your font shipped as e.g. Calibre-Bold.woff2 — then paste Calibre-Bold here.

Each face becomes its own @font-face block. The filename field on each row defaults to a clean pattern, but you can paste the exact filename you uploaded if your foundry shipped it with a different name — no renaming required.

Apply to

Controls which Dawn typography roots the CSS variable block overrides.

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;
}

Typography Kit

Don't want to make the decision?

You've got working code — but you still have to pick fonts that fit your brand, confirm they're licensed for ecommerce, and paste it in without breaking the theme. A Shopify Typography Kit is the decision already made: a proven pairing, the exact copy-paste code for your theme, the license cleared, and a visual specimen — instant download.

See the Typography Kits$19 · one-time · instant download

Affiliate · No cost to you

Don't have a font yet?

Creative Fabrica has 30,000+ web fonts with commercial licenses included — ready to drop into the @font-face block this site generates. Most are under $20, and the all-access subscription unlocks the full library.

Browse Creative Fabrica

Affiliate · No cost to you

Custom font + custom merch?

Printify plugs into Shopify in one click. 900+ products, no inventory risk, fulfilled and shipped automatically when an order lands. Free to start — you only pay when you sell.

Try Printify

New · Free Chrome extension

Use the generator without leaving your tab

The Shopifont Chrome extension generates the same three code blocks from a popup — built for the moment you're already in the Shopify admin and don't want to tab-switch.

Get the extension

Step 01

Enter your font

Type the display name and tick the formats your foundry sent you. WOFF2 covers ~97% of modern browsers.

Step 02

Copy three blocks

The site generates @font-face CSS, a settings_schema.json snippet, and CSS variable overrides — each with a copy button.

Step 03

Paste into Shopify

Upload the file to your theme's Assets folder, paste the @font-face into base.css, the JSON into settings_schema.json. Save and refresh.

Generators for every free Shopify theme

One generator, thirteen tailored landing pages. Each links the theme-specific selectors, default fonts, and Liquid injection point you actually need.

Most popular · ~70% of new Shopify stores

Dawn Custom Font Generator

general-purpose

Open generator