Adding custom fonts to Shopify is harder than it should be. The platform ships with eight default fonts. If you want anything else, you have two paths: edit theme code yourself, or use an app that handles it for you.

This guide covers both. The code path takes 20 to 40 minutes if nothing goes wrong and you’re comfortable in Liquid. The app path takes 30 seconds.

Pick the one that matches your skill level and time budget.

Why Shopify makes custom fonts harder than they should be

Shopify themes load fonts through the theme settings, but the font picker only exposes a curated subset of system fonts and a few Google Fonts. If your brand uses a font outside that list, you’re on your own.

The platform’s reasoning is performance. Custom fonts load slowly if implemented badly, and slow stores convert worse. Shopify’s default font system is optimised, fast, and limited. Custom fonts done right are fast too. They just require setup.

Method 1: The code path

This works on any Shopify 2.0 theme. You need access to the theme code editor and basic comfort editing Liquid and CSS.

Step 1: Upload your font files

In Shopify admin, go to Online Store → Themes → Edit code. Open the Assets folder. Click Add a new asset and upload your font files.

Use WOFF2 format if you have it. WOFF2 is roughly 30% smaller than WOFF and supported in every modern browser. If you only have TTF or OTF, convert them at fontsquirrel.com/tools/webfont-generator before uploading.

You’ll typically have one file per weight you need: regular (400), bold (700), and maybe italic. Don’t upload weights you won’t use.

Step 2: Add @font-face declarations

Open assets/base.css (or theme.css, depending on your theme). Scroll to the top and add:

css
@font-face {
  font-family: 'YourFontName';
  src: url('{{ "yourfont-regular.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YourFontName';
  src: url('{{ "yourfont-bold.woff2" | asset_url }}') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

The {{ "filename" | asset_url }} is Liquid syntax that resolves to the correct CDN path for your uploaded file. Don’t hardcode URLs.

font-display: swap is critical. It tells the browser to show fallback text immediately while the custom font loads, then swap once ready. Without it, your text will be invisible for up to 3 seconds on slow connections.

Step 3: Apply the font in your theme

Find the CSS selectors you want to apply the font to. For headings:

css
h1, h2, h3, h4, h5, h6 {
  font-family: 'YourFontName', system-ui, sans-serif;
}

For body text:

css
body {
  font-family: 'YourFontName', system-ui, sans-serif;
}

Always include fallback fonts. If your custom font fails to load, the browser falls back to the next font in the stack. system-ui is a good fallback because it uses the operating system’s default font, which is fast and readable.

Step 4: Save and preview

Save your changes. Open the storefront in a private window (to avoid cache issues). The font should be applied. If not, see the troubleshooting section below.

Common errors and how to fix them

Font doesn’t load at all. Check the browser console (F12 → Network tab → filter by Font). If you see a 404, the asset URL is wrong. Double check the filename matches exactly, including case.

Font loads but doesn’t apply. Your CSS selector isn’t winning the specificity battle. Theme styles often use more specific selectors than body or h1. Use browser dev tools to inspect the element, find which rule is winning, and write a more specific rule.

Font flickers when the page loads. Add <link rel="preload" as="font" href="{{ "yourfont-regular.woff2" | asset_url }}" type="font/woff2" crossorigin> to your theme.liquid <head>. This tells the browser to fetch the font earlier in the page load.

Bold or italic doesn’t work. You uploaded the regular weight only. Browsers can fake bold and italic with synthesis, but it looks bad. Upload the actual bold and italic font files and add @font-face declarations for each.

Method 2: The Fontrise path

If you don’t want to touch code, install Fontrise from the Shopify App Store. Pick a font from 1,500+ Google Fonts, upload your own, or connect Adobe Fonts. Apply it to headings, body, buttons, or specific elements through the theme editor. Save.

That’s the whole process. 30 seconds.

Free plan covers one font with full features and a small Fontrise badge in your theme settings. Pro at $9.99 per month covers unlimited fonts and removes the badge.

Performance considerations the other guides skip

WOFF2 vs WOFF vs TTF

WOFF2 is the modern standard. Smaller file size, supported in 97% of browsers worldwide. Use WOFF2 unless you specifically need to support browsers older than 2014, which you don’t.

If you only have TTF or OTF files from a font foundry, convert them to WOFF2 before uploading. The browser will load WOFF2 30% faster on average, which matters when fonts are blocking your text from rendering.

Font loading strategies

font-display: swap is the right default for most stores. Text appears instantly in a fallback font, then swaps to your custom font when loaded. The brief swap is acceptable in exchange for never showing invisible text.

font-display: optional is more aggressive. The browser waits up to 100ms for the font, and if it hasn’t loaded, gives up and uses the fallback for the entire pageview. Faster for the user but less consistent for your brand.

font-display: block shows nothing until the font loads. Don’t use this. It’s why some sites have invisible text for 3 seconds.

Why your fonts feel slow

Three usual culprits:

  1. You’re loading too many weights. Each weight is a separate file. If you only use regular and bold in your design, don’t load light, medium, and black.
  2. You’re loading WOFF instead of WOFF2. Convert.
  3. You’re not preloading the font. The browser doesn’t discover the font file until it parses the CSS, which is too late. Add the preload link in theme.liquid so the font starts downloading immediately.

FAQ

Can you use custom fonts on Shopify? Yes. Either through the theme code editor (manual) or through an app like Fontrise (no code).

How do I add Google Fonts to Shopify? Code path: add a <link> tag pointing to fonts.googleapis.com/css2?family=YourFont in theme.liquid‘s <head>, then reference the font in your CSS. App path: Fontrise has the full Google Fonts library built in, pick one and apply.

Why won’t my custom font work in Shopify? Most common cause is a 404 on the font file. Check the browser console’s Network tab for failed font requests. Second most common is CSS specificity, your custom rule is being overridden by theme defaults.

How do I change the font in Shopify Dawn theme? Dawn supports custom fonts through the theme editor for a small set of options. For a font outside that list, follow the code path above or use Fontrise.

Does Fontrise work on every theme? Yes, every Shopify 2.0 theme. Dawn, Sense, Refresh, Studio, Trade, Crave, all of them. If your theme is older (pre-2.0, also called “vintage”), you’ll need to use the code path.

What to do next

If you have a developer or are comfortable in code, the manual path gives you maximum control. You’ll know exactly what’s loading and why, and you won’t depend on a third-party app.

If you’d rather spend 30 seconds and move on to running your store, install Fontrise from the Shopify App Store. Most merchants try the code path first, hit one of the errors above, and switch to Fontrise the second time they need to change a font.

Either way, your store should be using typography that matches your brand. The default eight fonts aren’t enough.