Fonts

Google Fonts or your own font files — how to add them, where they show up, missing-character fallbacks, and what to do when a font fails.

Fonts live in your Design Assets library. Each text element then picks which of those fonts a customer can choose from — so add a font once, use it on any template.

Two kinds of font

  • Google Fonts — the whole Google catalogue is searchable inside the app. Pick a family and it's ready to use; nothing to upload.
  • Custom fonts — your own font file (a brand typeface, a licensed display font). You give the app a URL to the file and it takes it from there.

Adding a Google Font

  1. Go to Design Assets → Font options → New font, or in the template builder select a text element and click Manage fonts →.
  2. On the Google Fonts tab (Google fonts in the builder panel), search by name or filter by category — Sans-serif, Serif, Display, Handwriting, Monospace. Every result previews in its own typeface.
  3. Select the family. It's added to your library and — from the builder — linked to the text element you had selected.

Adding a custom font

You need a public URL to the font file. The easiest host is Shopify itself:

  1. In your Shopify admin go to Content → Files and upload the font file. Supported: .woff2, .woff, .ttf and .otf, up to 5 MB.
  2. Click the file and copy its URL (it starts with https://cdn.shopify.com/).
  3. In the app: Design Assets → Font options → New font → Custom Font tab. Give the font a Font Name and paste the link into Custom Font URL. In the builder, the same dialog is Manage fonts → Add a custom font (Font name + Asset URL).
  4. Save. The app fetches the file, checks it really is a font, converts it to a print-safe format if needed and keeps its own copy — so the storefront customizer and your print files keep working even if you later remove the file from Shopify.

Any public URL works, not just Shopify Files — as long as the link returns the raw font file rather than a web page. The app checks the file's contents, not its extension, so a .ttf link that actually serves a WOFF2 file is fine.

Font licences

Web-font licences vary. Make sure yours allows the font to be shown on your website and printed onto products you sell — a desktop licence on its own usually doesn't cover either.

Where fonts show up

  • Template builder — select a text element, open Manage fonts → and tick the fonts this element offers. The My custom fonts tab has a Select all for bulk linking. Reorder linked fonts in the Fonts section to set the default (the first one is what customers see before they choose).
  • Storefront customizer — customers only see the fonts you linked to that element. If you link just one, the picker disappears and the text simply uses it.
  • Brand & language → Font Button Display controls how the picker labels each font: the font's name, a sample (abc, AaBbCc) or your own preview text. Font Dropdown Threshold switches to a dropdown when an element offers many fonts.
  • Print files — the same font renders in the final artwork, at full resolution.

Missing characters

If a customer types a character the font doesn't include (an accented letter, a currency symbol, punctuation), the app substitutes it from a fallback. Set the Fallback Font Type per font — Sans-serif (recommended) or Serif — in the font's settings so the substitute matches as closely as possible. The same fallback is used in the customizer and in the print file, so what the customer sees is what prints.

Emoji and right-to-left scripts aren't supported; the customizer warns the customer when they type one and the characters don't reach the print file.

When a font shows "Font failed"

A red Font failed badge in Design Assets → Font options means the app couldn't ingest the file from the URL you gave. Hover the badge for the reason. The usual causes:

  • The URL points at a web page or an image, not a font file ("Not a recognized font file").
  • The file is larger than 5 MB.
  • The link isn't public (a private Google Drive or Dropbox link, for example).
  • The file was removed from the host, or the host took longer than 15 seconds to respond.

Fix the URL (or re-upload the file to Shopify Files) and save the font again. Until it succeeds, text using that font falls back to a system font in both the customizer and the print files.

Plan limits

Your font library has a cap per plan — 100 on Starter, 250 on Growth, 500 on Scale. The count shows next to Font options. See Design Assets.

What's next