Skip to main content
While EcomWize provides access to 1,500+ Google Fonts, you may need to use a proprietary or licensed font that is not available in the Google Fonts library. The custom font upload feature lets you upload your own font files and use them in your brand styles just like any Google Font.

​
Supported Font Formats

EcomWize supports the following font file formats:
FormatExtensionDescription
WOFF2.woff2Web Open Font Format 2 — the most compressed, recommended for best performance
WOFF.woffWeb Open Font Format — widely supported, good compression
TrueType.ttfTrueType Font — common desktop font format, larger file size
OpenType.otfOpenType Font — advanced typography features, larger file size
WOFF2 is recommended for the best balance of quality and performance. If your font provider offers multiple formats, choose WOFF2 first. It loads faster on published pages because the file sizes are significantly smaller than TTF or OTF.

​
Uploading Font Files

1

Open the Font Combobox

In the Brand Style modal, click on any font selector (Heading font, Body font, or Highlight font). This opens the font selection dropdown.
2

Switch to Custom Fonts

In the font selector, switch to the Custom tab to see your uploaded fonts and the upload option.
3

Click Upload

Click the upload button or drag font files into the upload area. You can upload multiple font files at once (e.g., all weights of a font family).
4

Wait for upload

Each file is uploaded to Cloudflare R2 CDN and registered in your account. A success confirmation appears for each file.
5

Select your custom font

After uploading, your custom font appears in the Custom Fonts section of the font selector. Click it to apply it to the current font slot (heading, body, or highlight).
Each font file has a maximum size of 5MB. If your font file exceeds this limit, try using the WOFF2 format instead, which is significantly smaller than TTF or OTF.

​
Auto-Detection of Font Properties

When you upload a font file, EcomWize automatically extracts metadata from the filename to categorize it correctly:

​
Font Family Detection

The font family name is extracted from the filename by:
  • Removing the file extension (.woff2, .ttf, etc.)
  • Removing common weight suffixes like -Bold, -Light, -Regular
  • Removing style suffixes like -Italic
  • Converting hyphens and underscores to spaces
  • Capitalizing each word
Examples:
FilenameDetected Family
Gilroy-Bold.woff2Gilroy
avenir_next_regular.ttfAvenir Next
BrandonGrotesque-Medium.otfBrandon Grotesque
montserrat-semibold-italic.woff2Montserrat

​
Font Weight Detection

The weight is determined from keywords in the filename:
Filename KeywordDetected Weight
thin100
extralight, ultra-light200
light300
(no weight keyword), regular400
medium500
semibold, semi-bold, demibold600
bold700
extrabold, ultra-bold800
black, heavy900

​
Font Style Detection

If the filename contains italic or oblique, the font is registered as italic. Otherwise, it defaults to normal (upright) style.
Auto-detection works based on common font file naming conventions. If your font files use non-standard naming, the family name and weight may need to be noted after upload. The font will still work correctly — the metadata is used for organization and display purposes.

​
Font Preview

After uploading, custom fonts are immediately available for preview:
  • In the font selector, your custom font appears with a live text preview showing the font applied to sample text
  • In the Brand Style preview panel, you can see how your custom font looks applied to headings, body text, or highlights in context
  • The font loads in your browser immediately, so you see the actual font rendering, not a placeholder

​
Applying Custom Fonts to Brand Style

Custom fonts are applied the same way as Google Fonts. You can use them in any of the three font slots:

​
As a Heading Font

Select your custom font in the Heading font dropdown. It will be used for all H1-H6 headings across all sections on pages using this brand style.

​
As a Body Font

Select your custom font in the Body font dropdown. It will be used for all paragraphs, labels, descriptions, and non-heading text.

​
As a Highlight Font

Select your custom font in the Highlight font dropdown. It will be used for text that has highlight formatting applied. Enable Text Highlighting in the Typography tab to use this feature.
For the best results, upload multiple weights of the same font family. For example, upload YourFont-Regular.woff2, YourFont-Medium.woff2, and YourFont-Bold.woff2. This ensures headings, body text, and buttons all use the correct weight of your custom font.

​
How Custom Fonts Load on Published Pages

When you publish a page to Shopify that uses custom fonts, here is what happens:
  1. Font files are served from Cloudflare R2 CDN — your uploaded font files are stored on a global content delivery network for fast loading worldwide.
  2. @font-face rules are generated — the Liquid template includes CSS @font-face declarations that reference your font files on the CDN.
  3. font-display: swap is used — this ensures text is visible immediately with a fallback font, then swaps to your custom font once it loads. Visitors never see a blank page while fonts load.
  4. Fonts are cached aggressively — font files are served with a one-year cache header (Cache-Control: public, max-age=31536000, immutable), so returning visitors load fonts instantly from their browser cache.
The result is that your custom fonts load quickly and reliably on published Shopify pages, regardless of the visitor’s location.

​
Google Fonts as an Alternative

If you do not need a proprietary font, Google Fonts offers a large and free library with excellent performance:
  • 1,500+ font families available in the font selector
  • No upload needed — select any Google Font from the dropdown and it is applied instantly
  • Categorized by type: Sans Serif, Serif, Display, Handwriting, Monospace
  • Search by name to find specific fonts quickly
  • All weights and styles are loaded automatically for each selected font
  • Served from Google’s CDN for fast global delivery
Google Fonts are loaded dynamically in the builder and via Google’s CDN on published pages. They do not count against your media storage usage. Custom uploaded fonts are stored in your account’s Cloudflare R2 storage.

​
Managing Custom Fonts

​
Viewing Your Fonts

All your uploaded custom fonts appear in the Custom tab of the font selector, grouped by font family. Each variant (weight and style) is listed separately.

​
Deleting Custom Fonts

To remove a custom font:
  1. Open the font selector and go to the Custom tab.
  2. Find the font you want to delete.
  3. Click the delete button next to the font.
  4. Confirm the deletion.
The font file is removed from both the CDN and your account.
Deleting a custom font does not automatically update brand styles or published pages that reference it. If a deleted font is still referenced, the browser will fall back to the font stack’s fallback font (e.g., sans-serif). Update your brand styles to use a different font before deleting.