Custom Font Uploads

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:

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 Dropdown
   

   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 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.

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 Work on Published Pages

When you publish a page to Shopify that uses custom fonts, they are automatically loaded on the published page. Text is visible immediately with a fallback font, then your custom font appears once it loads. Visitors never see a blank page while fonts load.

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

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 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, a generic fallback font will be used instead. Update your brand styles to use a different font before deleting.