Free Shopify Origin Custom Font Generator

Generator

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

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

{
  "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
    }
  ]
}

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

Frequently asked questions

• How do I add a custom font to the Shopify Origin theme?

  Upload your font files to Origin'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. Origin reads those tokens for every typography rule, so the swap propagates instantly.

• What font formats does Origin support for custom uploads?

  Origin 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 Origin?

  Not if you set `font-display: swap` (the generator does this automatically) and reserve typography metrics by overriding Origin's CSS variables instead of swapping fonts via JavaScript. Origin's headings — .section__heading, .product-description — 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 Origin?

  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 Origin instead of self-hosting?

  Origin 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.