Using a custom font

The built-in fonts

Every template except Duo offers a font dropdown. It sits under Typography on Simple, Minimal, Countdown, and Split Hero, and under Colors & Typography on Video Hero and Product Showcase. The options are system fonts, grouped into sans-serif and serif:

Sans-serif — Century Gothic, Helvetica/Arial, Impact, Lucida Grande, Trebuchet MS, Verdana
Serif — Garamond, Georgia, Palatino, and others

These need no loading and render instantly, which matters on a page a visitor may only see once.

Loading a different font

There is no font upload field. To use a Google Font or your brand’s typeface, load it with Custom CSS on the Advanced category.

Requires PremiumThe Custom CSS field is part of the Premium plan (and the grandfathered Legacy plan). On Basic or Pro, you are limited to the built-in list.

A Google Font

Put this in Custom CSS:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body,
h1, h2, h3,
input, button {
  font-family: 'Inter', system-ui, sans-serif;
}

Swap Inter for whichever family you want, and keep the weights list short — each extra weight is another file to download.

The @import must be the first rule in the field. CSS ignores an @import that appears after other rules, and the font will silently not load.

A self-hosted font

If you have licensed a typeface and can host the files somewhere with CORS enabled — your own CDN, or Shopify’s Content → Files — declare it:

@font-face {
  font-family: 'Brand Sans';
  src: url('https://cdn.shopify.com/s/files/.../BrandSans.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body, h1, h2, h3 { font-family: 'Brand Sans', system-ui, sans-serif; }

To get the URL: upload the .woff2 in your Shopify admin under Content → Files, then copy the link Shopify gives you.

Check the licenceMost desktop font licences do not cover web embedding. Serving a font file from your storefront is web use, and needs a webfont licence.

Always keep a fallback

The final name in a font-family list is what renders while your font downloads, and what renders if it fails. font-family: 'Brand Sans' on its own gives a visitor a default serif for the first moment of the page. 'Brand Sans', system-ui, sans-serif gives them something close.

font-display: swap is worth including for the same reason: text is readable immediately, then reflows into your font.

Targeting one element

You do not have to change everything. To restyle just the heading:

h1 { font-family: 'Fraunces', Georgia, serif; }

Open your page at https://your-store.myshopify.com/apps/coming-soon and inspect it to find the right selector.

If the font does not appear

Check the @import is first. Anything above it disables it.
Check the family name. It must match the font exactly, quotes included.
Look at the browser console on your live page. A blocked or 404’d font file shows up there.
Hard-refresh. A cached stylesheet can hide a change you just made.