Skip to main content

​
Overview

Podifai allows you to set a global font that applies to all text in your customizers. You can choose from built-in fonts, inherit fonts from your Shopify theme, or upload custom fonts for a unique brand experience.

​
Font Source Options

Podifai supports three font sources:

​
1. Built-in Fonts (Google Fonts)

Choose from a curated selection of popular Google Fonts that are optimized for web use. Popular Options:
  • Inter (Default) - Modern, clean, highly readable
  • Roboto - Friendly and professional
  • Open Sans - Neutral and versatile
  • Lato - Warm and approachable
  • Montserrat - Geometric and modern
  • Poppins - Geometric with personality
  • Plus many more…
Built-in fonts load quickly and are optimized for performance across all devices.

​
2. Shopify Theme Fonts

Inherit the font family from your Shopify theme to maintain perfect consistency with your store’s design. Benefits:
  • Automatic matching with your store’s branding
  • No additional font loading required
  • Seamless integration with your theme
When to Use:
  • You want customizers to match your store exactly
  • Your theme uses a premium or custom font
  • You’re concerned about page load performance
This is the recommended option for most stores as it ensures visual consistency.

​
3. Upload Custom Fonts

Upload your own font files for complete control over typography. Supported Formats:
  • .ttf (TrueType Font)
  • .otf (OpenType Font)
  • .woff (Web Open Font Format)
  • .ttc (TrueType Collection)
Use Cases:
  • You have a licensed brand font
  • You want a unique, custom typeface
  • You need to match specific brand guidelines

​
How to Set Global Fonts

1

Open Global Settings

Click the Global Settings button in the editor toolbar
2

Choose Font Source

Select one of the three font source options:
  • Built-in Fonts
  • Shopify Theme
  • Upload Custom
3

Select or Upload Font

  • For Built-in: Choose from the dropdown menu
  • For Theme: No action needed, font is inherited automatically
  • For Custom: Drag and drop or click to upload your font file
4

Preview Changes

See your font applied in real-time in the editor
5

Save Settings

Click Save to apply the font to all customizers

​
Uploading Custom Fonts

​
Step-by-Step Guide

Ensure your font file is in one of the supported formats (.ttf, .otf, .woff, .ttc) and that you have the proper license to use it on your website.
In Global Settings, select Upload Custom and either:
  • Drag and drop your font file into the upload area
  • Click the upload area to browse and select your file
Your font will be uploaded and processed. This usually takes a few seconds.
Check the preview to ensure your font displays correctly. If it doesn’t look right, try re-uploading or using a different format.

​
Font File Requirements

  • Maximum file size: 5 MB
  • Recommended formats: .woff or .ttf for best compatibility
  • License: Ensure you have web use rights for the font
Make sure you have the legal right to use any custom font on your website. Unlicensed font use can result in legal issues.

​
Font Weights and Styles

​
Available Weights

Depending on your chosen font, you may have access to multiple weights:
  • Thin (100)
  • Extra Light (200)
  • Light (300)
  • Regular (400) - Default
  • Medium (500)
  • Semi Bold (600)
  • Bold (700)
  • Extra Bold (800)
  • Black (900)
Not all fonts support all weights. Built-in Google Fonts typically offer multiple weights, while custom fonts depend on what’s included in the font file.

​
Font Styles

  • Normal - Standard upright text
  • Italic - Slanted text for emphasis

​
Best Practices

​
Readability First

Choose fonts that are easy to read at various sizes. Avoid overly decorative fonts for body text. Good for body text:
  • Inter, Roboto, Open Sans, Lato
Good for headings:
  • Montserrat, Poppins, Raleway, Playfair Display

​
Performance Considerations

Font Loading Impact:
  • Built-in fonts: Fast, optimized loading
  • Theme fonts: No additional load (already loaded)
  • Custom fonts: Adds to page load time
If using custom fonts, optimize your font files by removing unused characters and weights to reduce file size.

​
Brand Consistency

Match your font choice to your brand personality:
Brand TypeRecommended Fonts
Modern TechInter, Roboto, Manrope
LuxuryPlayfair Display, Cormorant, Cinzel
FriendlyPoppins, Quicksand, Nunito
ProfessionalLato, Source Sans, Work Sans
CreativeMontserrat, Raleway, Josefin Sans

​
Troubleshooting

Possible causes:
  • Font file is corrupted
  • Font format not supported
  • Browser caching issue
Solutions:
  • Try a different font format (.woff is most reliable)
  • Clear your browser cache
  • Re-upload the font file
Possible causes:
  • Font weight not supported
  • Font rendering differences between browsers
Solutions:
  • Check if the font file includes the weight you’re using
  • Test on multiple browsers
  • Consider using a different font
Possible causes:
  • Theme hasn’t fully loaded
  • Theme uses multiple fonts
Solutions:
  • Refresh the page
  • Check your theme’s typography settings
  • Contact support if issue persists

Global Colors

Configure global color settings

Visual Customization

Customize the visual appearance
Font changes apply globally to all customizers. Individual option types cannot override the global font setting.