How to Change or Add a Custom Font in Shopify

Most Shopify font changes take a minute in the theme editor. Adding a font that isn’t in Shopify’s library takes a few lines of code, and the step most guides get wrong is where to upload the file.

We build Shopify stores through our Shopify development service, so weigh that. Every fact below was checked against the Shopify Help Center, Shopify’s developer docs and Google’s web.dev guidance in October 2026.

Short answer: to change fonts, go to Online Store > Themes > Edit theme > Theme settings > Typography and pick a new heading or body font. To add a custom font, upload the WOFF2 file to Content > Files, add an @font-face rule to your theme code using the file_url filter, then apply the font with CSS. Shopify recommends Files over the code editor’s assets folder, because uploading some font types through the code editor can corrupt them.

Your Options at a Glance

As of October 2026, from the Shopify Help Center and Shopify developer docs:

Option	Code needed	Where	Good to know
System font	No	Theme settings > Typography	Already on the visitor’s device, so nothing downloads
Shopify font library	No	Theme settings > Typography	Free on all stores, served as WOFF and WOFF2
Custom font in Files	Yes, a few lines	Content > Files + theme code	Font uploads need a paid plan
Third-party font host	Yes	The provider’s embed code	Shopify mentions Typekit as an example

Sources: Theme settings, Fonts in themes, Uploading files.

How to Change Fonts in the Shopify Theme Editor

Shopify’s steps (source):

From your Shopify admin, go to Online Store.
Find the theme you want to edit and click Edit theme.
Click the Theme settings icon, then Typography.
Click Change in the Headings or Body section.
Click the font you want, click Select, then Save.

The same Typography panel has size sliders for headings and body text. They run from 100% to 150% in 5% steps. Which fonts and controls you see depends on your theme’s developer.

The picker offers two kinds of font. System fonts are already installed on the visitor’s device. Shopify suggests considering them because they avoid a font download that can slow your store. Shopify font library fonts include a selection of Google Fonts and are free to use on every Shopify store (source). Shopify notes that licensing stops it from including some fonts, which is when you need a custom font.

How to Add a Custom Font to Shopify

This is the method Shopify documents for adding a font to an existing theme through the admin (source). Duplicate your theme first (Themes > … > Duplicate) so you can test on the copy.

1. Get the web font files. You need a license that covers website use, and the files in WOFF2. Google’s guidance is that WOFF2 is supported everywhere, so unless you need very old browsers, WOFF2 alone is enough (source). Get one file per weight and style you’ll use, such as regular and bold.

2. Upload them to Content > Files. In your Shopify admin, go to Content > Files and click Upload files. Don’t use the code editor’s assets folder for this: Shopify says uploading some font types there through the admin code editor can lead to file corruption (source). One catch: on a trial plan, Files only accepts a short list of formats that doesn’t include fonts. On a paid plan you can upload any file type except HTML, up to 20 MB (source).

3. Add an @font-face rule to your theme. Go to Online Store > Themes, click … next to the theme, then Edit code. Open layout/theme.liquid and add this just before </head>, using your own font name and file names:

<style>
  @font-face {
    font-family: "BrandFont";
    src: url("{{ 'brandfont-regular.woff2' | file_url }}") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "BrandFont";
    src: url("{{ 'brandfont-bold.woff2' | file_url }}") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
</style>

The file_url filter outputs the URL of a file in Content > Files, which is the filter Shopify’s docs use for this method. If you’re building a theme to push with Shopify CLI, a theme ZIP or GitHub, Shopify says to keep the font in the theme’s assets folder and use asset_url instead.

4. Apply the font. Point the elements you want at the new family, with a fallback after it:

h1, h2, h3 { font-family: "BrandFont", Georgia, serif; }
body { font-family: "BrandFont", system-ui, sans-serif; }

You can put this in the same <style> block, or in Theme settings > Custom CSS. If the font doesn’t show, your theme is probably setting fonts with a more specific selector. Right-click the text, choose Inspect, and target the selector the theme uses.

5. Check it. Preview the duplicate theme on desktop and mobile, then publish it.

Can You Add a Font With Only Custom CSS?

Partly. Theme settings > Custom CSS applies to the whole store, and Shopify doesn’t restrict custom fonts there, but it comes with limits (source):

Theme-wide custom CSS is capped at 1,500 characters, and section CSS at 500.
@import isn’t allowed, so you can’t pull in a font provider’s stylesheet that way.
The box takes plain CSS, not Liquid, so file_url won’t work. You’d paste the file’s link instead, copied with the Link button on the Files page.

That last point has a trap. Shopify says that when you replace a file, the name stays the same but the link changes (source). A pasted link breaks the moment you swap in a new version of the font. The file_url method in theme code builds the link from the file name, so it doesn’t have that problem.

Font Licensing on Shopify

Shopify font library: free to use on all Shopify stores (source).
Google Fonts: open source and free, and Google says you can use them commercially. Most are under the SIL Open Font License (source).
Paid fonts from a foundry: check that your license covers embedding on a website before you upload the files.

How to Keep Custom Fonts Fast

Shopify’s own warning: fonts are a separate resource the browser downloads before it renders text, and it’s your responsibility to make sure custom fonts don’t hurt your storefront (source). What keeps the cost down:

Load fewer files. Every weight and style is its own file. A system font downloads nothing. A variable font can replace several weight files with one (source).
Choose a font-display value. swap shows text straight away in the fallback font and swaps when yours arrives, which risks a layout shift. optional gives the font about 100ms to arrive, and if it misses that window the fallback stays (source). For library fonts, Shopify’s font_face filter takes a font_display parameter (source).
Preload sparingly. Shopify’s preload_tag filter preloads a Shopify-hosted asset, and Shopify says to use it sparingly, for resources needed above the fold (source). Preloading one heading font can help. Preloading every weight defeats the point.
Pick a close fallback. Swapping between fonts of different sizes is what shifts the layout. The CSS size-adjust property can bring the fallback closer to your font (source).

Setting Brand Colors in Shopify

Colors sit in the same Theme settings panel. Newer themes use a color palette: change a color there and every setting that uses it updates. Older themes use color schemes, groups of background, text and button colors you apply to sections, with up to 21 schemes (source). Enter exact hex codes from your brand guide so every button matches.

Checkout is styled separately, in the checkout editor. Our Shopify checkout customization guide covers what you can change there.

Shopify Core Web Vitals optimization: fonts, images and scripts that slow a store
Shopify checkout customization options: branding the checkout
Shopify Liquid explained: the template language behind file_url
Custom vs free Shopify themes: when a theme’s settings stop being enough

FAQ

How do I change the font on my Shopify store?

Go to Online Store, click Edit theme, open Theme settings > Typography, and click Change under Headings or Body. Pick a font, click Select, then Save.

How do I upload a custom font to Shopify?

Upload the WOFF2 file to Content > Files, add an @font-face rule to layout/theme.liquid using the file_url filter, and apply the font with CSS. Shopify recommends Files over the code editor’s assets folder, which can corrupt some font types.

Why can’t I upload a font file to Shopify?

On a trial plan, the Files page only accepts formats such as JS, CSS, images, JSON, CSV and PDF, not font files. On a paid plan, you can upload any file type except HTML, up to 20 MB.

Can I use Google Fonts on Shopify?

Yes. Shopify’s font library includes a selection of Google Fonts you can pick in the theme editor. For a Google Font that isn’t in the library, download it and add it as a custom font. Google says its fonts are free for commercial use.

What font format should I use on Shopify?

WOFF2. Google’s guidance is that it’s supported in all modern browsers and compresses better than WOFF. Shopify serves its own library fonts as WOFF and WOFF2.

Do custom fonts slow down a Shopify store?

They can. Each font file is a download before text renders. Use as few weights as you need, set font-display, preload only the font used above the fold, or use a system font, which downloads nothing.

Want your brand's fonts and colors set up properly across the theme and checkout? Tell us what you're working with. Shopify store builds