Skip to main content

Applying Custom Fonts

Learn how you can use your own fonts within FERMÀT to create a cohesive brand experience across all your shoppable content.

Updated this week

Font Selection Resource

Use our comprehensive font reference table to find typefaces that are optimized for FERMÀT's platform. This resource includes technical specifications, performance data, and compatibility information to help you make informed font decisions for your brand.

Typography Reference Guide: Access Font Compatibility Database

What's in this guide:


Overview

FERMÀT uses mobile-optimized fonts by default for clear, conversion-friendly shopping experiences. You can keep these defaults or add custom fonts to showcase your brand’s unique identity. Consistent typography builds recognition and trust with customers.

Understanding Font Application in FERMÀT

Your font choices will appear consistently across all FERMÀT components, including:

  • Shoppable Product Cards: Product names, prices, descriptions, and call-to-action buttons

  • Product Detail Pages: Headings, product information, reviews, and purchase options

  • Product Grids: Category headings, product titles, and pricing information

  • Video & Product Overlays: Promotional text, product labels, and interactive elements

This consistent application ensures your brand voice remains strong throughout the entire customer journey.

How to Set Up Your Custom Fonts

Step 1: Get to Font Settings

  • Go to SettingsBrandingFonts

Step 2: Add Your Fonts

  • In the My Fonts section, click + Add another font

  • Upload your font file (WOFF, WOFF2, TTF, or OTF)

  • Repeat for additional fonts or font weights

Step 3: Assign Fonts to Text Styles

  • In the Text Styles section, click the dropdown next to each text element

  • Choose which font to use for:

    • Headings 1-6: For titles and section headers

    • Paragraphs 1-3: For body text and descriptions

    • Labels: For buttons and tags

Step 4: Preview and Save

  • Check the Mobile Text Style Guide on the right to see your changes

  • Click Save changes when you're happy with how it looks


Visual Examples

See how these typography styles are applied in real FERMÀT components

Product Grid: Heading 5 typography for product titles and pricing


Shoppable Product Card: Multiple typography styles including Heading 3, Heading 4, and Labels


Product Image Carousel: Heading 2 and Heading 3 typography for product information

Video & Product: Labels, Heading 5, and Paragraph typography in video context


Troubleshooting Common Issues

Font Not Displaying

  • Make sure your file format is supported (WOFF, WOFF2, TTF, OTF).

  • Test the file locally to confirm it’s not corrupted.

  • Keep font files under 2MB.

  • Clear your browser cache and refresh.

Performance Issues

  • Compress large font files.

  • Limit the number of font weights.

  • Use system fonts as fallbacks when possible.

Readability Problems

  • Preview fonts at the sizes you’ll use.

  • Check contrast between text and background.

  • Adjust line spacing for clarity.

  • Test with real content, not just sample text.

Did this answer your question?