How do I add a custom font to my Shopify theme?

First check whether your font is already in Shopify's font library. If it is, you do not need code: open the theme editor, go to Theme settings, then Typography, and pick it from the font list. If it is not, upload the font file (ideally .woff2) and add one @font-face rule that points to it, then tell your theme's CSS to use that font name.

We tested both routes, plus Google Fonts, on a Shopify development store on 12 October 2026. All three fonts loaded in the browser. The details below are what Shopify actually returned, including the two error messages a broken font setting produces.

Is my font already in Shopify's font library?

Check before you upload anything. Shopify describes its library as "a collection of fonts that includes system fonts and a selection of Google fonts", and every font in it is free to use on any Shopify store. The full list is the Available fonts table on Shopify's developer page for theme fonts.

The library is bigger than people expect. In our test, Geist (a 2023 typeface) was in it: setting the theme's font to geist_n4 loaded Geist from Shopify's own font server with no file uploaded. What the library does not have is fonts you bought from a foundry, most Adobe Fonts, and some fonts Shopify says it cannot include for licensing reasons. Those need the upload route.

Which way of adding a font should I use?

Uploading the font into your theme or your Files keeps it on Shopify's servers, the same place as the rest of your store. Google Fonts and Adobe Fonts both work, but each makes the visitor's browser connect to another company's server first, which is why shopify theme check flags the Google Fonts link with "Asset should be served by the Shopify CDN for better performance."

How do I upload a font file and use it?

Shopify's documentation gives two places to put the file, and the choice depends on where you edit code.

1. Get a .woff2 file. It is the smallest web font format. If you only have .ttf or .otf, convert it with a font converter first.
2. Upload it. If you edit code in the Shopify admin, go to Content, then Files, and upload it there. Shopify's documentation warns that uploading some font types into the theme's assets folder through the admin code editor "might lead to file corruption". If you work locally with Shopify CLI or edit a theme ZIP, put the file in the assets folder instead.
3. Add an @font-face rule. Put it inside a {% style %} tag in layout/theme.liquid, before the closing </head>. For a file in Files, use file_url:

{% style %}
  @font-face {
    font-family: "Brand Sans";
    src: url({{ 'brand-sans.woff2' | file_url }}) format("woff2");
    font-weight: 400;
    font-display: swap;
  }
{% endstyle %}

For a file in the theme's assets folder, the only change is the filter: {{ 'brand-sans.woff2' | asset_url }}. That is the version we tested, and Shopify served our file from the theme's CDN path with status 200 and type font/woff2.

4. Apply it. Add a rule such as h1, h2, h3 { font-family: "Brand Sans", sans-serif; } to the same style tag. Many themes route fonts through CSS variables instead; Dawn, for example, uses --font-heading-family and --font-body-family, so overriding those changes every heading or every paragraph at once.
5. Add one rule per weight. Bold and regular are separate files. Repeat the @font-face block with the bold file and font-weight: 700, or the browser fakes bold by smearing the regular weight.

What happened when we tested it on a real store?

We pushed a small test theme to a development store with Shopify CLI 3.93.1, loaded it in Chromium, and asked the browser which fonts it had loaded. All three test fonts reported as loaded.

The .ttf result surprised us: Shopify's CDN converted the file to WOFF2 on the way out. It worked, but it is undocumented, so we would still upload .woff2 rather than rely on it.

Why does my theme say "default is required" or "default is invalid" for a font?

Both come from a font_picker setting in the theme's settings file, the setting that puts a font dropdown in the theme editor. Every font_picker needs a default, and the default must be a font handle from Shopify's library, not a font name.

A handle is the font's name in lowercase with underscores, then a style code: n4 is normal at weight 400, n7 is normal bold, i4 is italic. Copy it from the Available fonts table rather than guessing. Note that theme check passes an invalid handle, so a clean check does not mean the upload will work; the same gap shows up in other upload errors, covered in why a Shopify theme ZIP will not upload. A font you uploaded yourself can never be a font_picker default, because the picker only offers library fonts.

Will a custom font survive a theme update?

The file will, the code may not. Fonts in Content, then Files belong to the store, not the theme, so they stay when you update or switch themes. The @font-face rule you added to theme.liquid is a code edit, and Shopify does not carry code edits into an updated theme version. Keep a copy of the rule and check it after every update; we explain what does and does not carry over in will I lose my customizations if I update my Shopify theme.

Am I allowed to use a font I bought on my store?

Only if the licence covers web use. A desktop licence lets you use a font in documents and graphics on your own computer; putting the file on a website usually needs a separate web font licence, often priced by monthly page views. Check the licence before you upload. Google fonts in Shopify's library or on Google Fonts are released under open licences that allow web use.

Where these numbers come from

On 12 October 2026 we built a minimal theme with one font_picker setting, a Google Fonts link and two uploaded font files (Geist, released under the SIL Open Font License), pushed it to a Shopify development store as an unpublished theme with Shopify CLI 3.93.1, read the rendered HTML, fetched each font URL, and checked document.fonts in Chromium. We then pushed four variations of the font setting's default and ran shopify theme check on each. The test theme was deleted afterwards. Documentation quotes are from Shopify's theme fonts page and Help Center Files page, read the same day. If you would rather start from a theme that already has its fonts chosen, every theme in our free theme gallery sets them in the theme editor, with nothing to code.