liquify.

How to change fonts in Shopify

Fonts do a lot of the work of making a store feel like a brand. Shopify themes let you pick heading and body fonts from Shopify's font library without touching code.

If the font you want isn't in the library, you can still use it with a font file and a little CSS.

1. Pick fonts in Theme settings

  1. Go to Online Store > Themes and click Customize.
  2. Click the gear icon (Theme settings) and open Typography.
  3. Choose a Headings font and a Body font from the font picker, and adjust the font size scale if your theme offers one.
  4. Save, then check a product page and the cart on mobile, where long words wrap first.

Two fonts is plenty: one with character for headings, one that's easy to read for body text.

2. Use a custom font

  1. Make sure your font license allows web use, then upload the font files (WOFF2 is best) in Content > Files and copy their URLs.
  2. In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
  3. In your theme's main stylesheet (often assets/base.css), add an @font-face rule pointing at the uploaded file.
  4. Apply it to headings or body text with a font-family rule, keeping a system font as a fallback.
Example: a custom heading font
@font-face {
  font-family: "Brand Display";
  src: url("YOUR_FILE_URL.woff2") format("woff2");
  font-display: swap;
}
h1, h2, h3 { font-family: "Brand Display", system-ui, sans-serif; }

3. Or ask Liquify in one sentence

Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.

“Change my store's fonts to a modern sans-serif for headings and body text”

Try it free on a sample store

Free plan, no credit card. Connect a real store whenever you're ready.

Questions

Can I use Google Fonts in Shopify?

Many popular Google Fonts are already in Shopify's font library. Others can be added with a font file and @font-face, as long as the license allows it.

Will a custom font slow down my store?

A font file or two is fine. Use WOFF2 files, only the weights you need, and font-display: swap so text shows while the font loads.

More guides