Show details for Upload Custom Fonts to Your Storefront

Upload Custom Fonts to Your Storefront

Upload your brand fonts once and use them for the body text and headings across your storefront.

Upload Custom Fonts to Your Storefront

Upload your brand fonts once and use them for the body text and headings across your storefront.

Guide3 min readVideo7-step guideUpdated 15 Oct 2026

Overview

Your storefront can use your own brand fonts. Upload the font files in Appearance SettingsAn area of Infigo where you can modify the overall look of your Storefront with fields such as logo, colour scheme specification and more, and the font family appears in every font list on the Theme tab, ready to use for body text or headings.

What it does

  • Your typeface everywhere - one setting changes the body text across your whole storefront.
  • Whole families - upload regular, bold and italic files and the storefront uses the right one for each weight and style.
  • Separate heading font - optionally pair a display font for headings with a plainer body font.

How it works

  • Fonts tab - in Appearance Settings, where you upload, rename, download and delete font files.
  • The file name is the family - each file is named fontName-fontStyle-fontWeight, and every file with the same fontName becomes one family.
  • Theme tab - Body Font and, when Separate Title Font is enabled, Title Font list every family you have uploaded.

Good to know

  • Never use full stops or spaces in a font file name. A name such as Brand.Regular.ttf is not recognised and can stop your storefront's styling from loading.
  • Before you rename or delete a font that is in use, choose a different font on the Theme tab and save.
  • After saving, clear the cache and hard-refresh your browser (Ctrl+F5) - browsers keep fonts for a while.
  • These fonts style your storefront. Fonts used inside personalisation editors are managed separately.
TipUpload a bold weight (700) as well as the regular (400). Without it, browsers fake bold text by thickening the regular font, which rarely looks right.

Before you begin

  • Make sure your font licence allows it to be used on a website.
  • Have a file for each weight and style you need, in TTF, OTF, WOFF, WOFF2 or EOT format (up to 16 MB each).
  • Rename the files to the standard, for example BrandSans-normal-400.ttf, BrandSans-normal-700.ttf and BrandSans-italic-400.ttf.

Step-by-step

  1. Name your font files the way the platform expects

    Each file must be named {fontName}-{fontStyle}-{fontWeight}, for example BitstreamVera-normal-400.ttf and BitstreamVera-normal-700.ttf. fontName is the family name and must be the same on every file in the family. fontStyle is normal, italic or oblique. fontWeight is normal, bold or a number such as 400 or 700. Do not use full stops or spaces in the name: a file such as Brand.Regular.ttf is not recognised and can stop your storefront's styling from loading. Make sure your font licence allows use on a website.

    Appearance Settings > Fonts: Font file name standard

    Appearance Settings > Fonts: Font file name standard
  2. Upload the files on the Fonts tab

    Go to Content Management > Appearance Settings and open the Fonts tab. Click Upload and select your files - you can select several at once. TTF, OTF, WOFF, WOFF2 and EOT files are accepted, up to 16 MB each.

    Fonts > Upload

    Fonts > Upload
  3. Check every file is listed

    Each uploaded file appears in the list with its size and date. Upload one file for each weight and style you want to use - a bold weight is only available if you uploaded a bold file. Use Actions to rename, download or delete files later.

    The two files of the BitstreamVera family

    The two files of the BitstreamVera family
  4. Select the new family as your Body Font

    Open the Theme tab. Your family now appears in the font lists under its fontName. Choose it in Body Font to use it for the text across your storefront.

    Theme > Body Font: BitstreamVera

    Theme > Body Font: BitstreamVera
  5. Optional: use a different font for headings

    Set Separate Title Font to Enabled to pick a different family for headings - useful when your brand has a display font for titles and a plainer font for body text.

    Separate Title Font

    Separate Title Font
  6. Save and clear the cache

    Click Save at the top of Appearance Settings, then Clear cache in the admin top bar. Refresh your storefront (you may need a hard refresh, Ctrl+F5, to drop fonts your browser has cached).

    Save

    Save
  7. See the font on your storefront

    Your storefront text now uses the new family. If the storefront suddenly looks unstyled after an upload, check the file names for full stops or spaces, rename and re-upload the files, select the font again and save. Before you rename or delete a font that is in use, choose a different font on the Theme tab first.

    Body text in the uploaded font

    Body text in the uploaded font

Video transcript

Overview video

0:00 Your own fonts on your storefront

0:03 You can use your own brand fonts on your storefront. You upload the font files once, then choose the font family for your body text, and optionally a different one for headings.

0:14 Each file is named with the family name, the style and the weight, separated by hyphens. Every file with the same family name becomes one font family.

0:24 The files are uploaded on the Fonts tab of Appearance Settings, one file for each weight and style.

0:31 The family then appears in the font lists on the Theme tab. Here it's set as the body font.

0:37 After saving and clearing the cache, the text across the storefront uses the new font.

0:44 That's three steps: name the files, upload them, and choose the family. The step-by-step guide on this page walks through each one.

Step-by-step video

0:00 Upload your own fonts

0:02 In this tutorial we'll add a brand font to your storefront. Before you start, check that your font licence allows web use, and have a file for each weight you need, such as regular and bold.

0:14 Go to Content Management, then Appearance Settings, and open the Fonts tab. The box at the top shows the naming standard: the family name, the style, and the weight, separated by hyphens. For example, BitstreamVera, hyphen, normal, hyphen, seven hundred. Don't use full stops or spaces in the name, or the font won't be recognised.

0:34 Click Upload and select your files. You can select several at once. TTF, OTF and WOFF files are all accepted.

0:44 Each file now appears in the list. Here we have the regular and the bold weight of the same family.

0:51 Open the Theme tab. The new family appears in the font lists under its family name. Choose it in Body Font.

0:58 If you'd like a different font for headings, set Separate Title Font to Enabled and choose a family in the Title Font list.

1:06 Click Save at the top, then Clear cache in the top bar. Refresh your storefront, using a hard refresh if the old font still shows.

1:15 And there it is: the text across the storefront now uses the new font.

1:20 That's it. If the storefront ever looks unstyled after an upload, check the file names, re-upload, choose the font again, and save. Before you rename or delete a font that's in use, choose a different one first.

Search terms

Alternate Search Phrases
upload fontcustom fontbrand fontweb fontfont filebody fonttitle fontappearance settings fontsttfwoff
Guide | Upload Custom Fonts to Your StorefrontLast updated: 15 Oct 2026
Incomplete
Start the conversation! Have a question? Tutorial out of date? Let us know HERE!