Custom fonts
Use any Google Font, or upload your own licensed typefaces to Shopify and load them in Formtoro.
Every font picker in Formtoro already searches the full Google Fonts catalog — no setup needed. If your brand uses a typeface you've licensed yourself, upload the font files to Shopify and Formtoro will find them, load them, and list them at the top of every font picker as "Your store's fonts".
1. Upload your font files to Shopify
In your Shopify admin, go to Content → Files and upload one file per weight and style you want to use.
- Supported formats:
.woff2(recommended),.woff,.ttf,.otf. - Each file must be under 2 MB — larger files are skipped as almost certainly not webfonts.
- Upload the font files, not a
.zip, and use Content → Files rather than pasting them into the theme code editor (that can corrupt a binary).
Make sure your font license covers web use. The file stays in your own Shopify storage and is served from your Shopify CDN — Formtoro links to it, it never copies or re-hosts your font.
2. Name the files so we can read them
A bare font file carries no family name, so Formtoro reads the filename.
Brandon-Grotesque_Bold-Italic.woff2 becomes the Brandon Grotesque family,
bold (700), italic.
- Everything left after the weight and style words is the family name, and that's exactly what you'll see in the picker — so name files carefully.
- Separate parts with
-,_,.or a space.BRANDONbecomes Brandon andbrandonGrotesquebecomes Brandon Grotesque. - Shopify's duplicate-upload suffix (
brandon-bold (1).woff2) is ignored. - Files whose name doesn't reduce to a usable family are skipped.
Recognized weight words — anything else is treated as part of the family name:
| In the filename | Weight |
|---|---|
thin | 100 |
extralight/ultralight | 200 |
light | 300 |
regular/normal/book | 400 |
medium | 500 |
semibold/demibold | 600 |
bold | 700 |
extrabold/ultrabold | 800 |
black/heavy | 900 |
A bare number works too (Brandon-700.woff2), and italic or oblique
anywhere in the name marks the file as italic. A file with no weight word is
treated as regular (400).
3. Scan your store
Open Settings → Branding & Themes → Fonts from your store and click Scan my store. Formtoro reads your Shopify files and lists every font family it found, each row rendered in its own typeface with the weights it picked up — that preview is how you confirm we found the right file.
Uploaded another weight later? Click Scan again. Re-scanning is safe and additive: it never removes a font you already have, and a temporary Shopify hiccup leaves your saved list untouched.
4. Use the font
Your fonts appear first in every font picker — the element inspector's Typography section, the theme editor, and the create-form wizard — under "Your store's fonts". Pick one and it renders everywhere: builder canvas, preview, and the live storefront.
If you have a store font and a Google font with the same name, your file wins — you licensed the real thing, so we load it rather than Google's lookalike.
A published form loads the font files that existed when you saved that version. After adding a new font (or a new weight), save a new version of any live form that should use it.
Limits and edge cases
- Up to 24 font families, and up to 6 weight/style files per family.
- Only fonts hosted on your Shopify storage load — Content → Files or your
theme's
assets/folder. Font URLs on other hosts are rejected for security. - If Formtoro says it needs permission to read your store files, click Reconnect Shopify in the banner — that shop's authorization predates the permission and reconnecting fixes it in one step.
- Typing a family name that's neither a Google font nor one of your uploads gives you a custom font: Formtoro writes the name into the CSS but loads nothing, so it only renders if your storefront theme already loads that font (and it won't look right in the builder or preview). Uploading the file is almost always what you want instead.
- Scanning requires permission to edit branding — see Team roles.
Next steps
- Themes — set a font once for a whole form.
- Brand colors — the other half of your visual identity.
- Going live — republish a live form so it picks up a new font.