Why Custom Fonts Matter

Custom fonts help differentiate your brand from competitors using default Shopify fonts. They create a unique visual identity that customers associate with your store and products.

Beyond aesthetics, the right typography improves readability and guides customers through your content. A well-chosen font can increase time on page, improve comprehension, and ultimately boost conversions.

Benefits of Custom Fonts

•Brand consistency across all touchpoints and marketing materials
•Visual distinction from competitors using standard fonts
•Professional appearance that builds customer trust
•Better readability when chosen appropriately for your audience

Understanding Font Formats

Before uploading fonts to Shopify, you need to understand the different font formats and which ones to use for optimal compatibility and performance.

WOFF2 (Recommended)

The most compressed format with excellent browser support. Use WOFF2 as your primary format for modern browsers. File sizes are typically 30% smaller than WOFF.

WOFF

Fallback for older browsers that do not support WOFF2. Good compression and wide compatibility. Include this as a secondary option.

TTF/OTF

Standard desktop formats. Larger file sizes than web formats. Only use as a last resort fallback for very old browsers.

Font Conversion

If you only have TTF or OTF files, convert them to WOFF2 using tools like Font Squirrel's Webfont Generator or Transfonter. Always verify you have the appropriate licence for web use.

Theme Editor Method

Many Shopify themes include built-in options for custom fonts. This is the easiest method if your theme supports it.

1
Access Theme Settings
Go to Online Store > Themes > Customise. Click on Theme Settings (gear icon) in the left sidebar.
2
Navigate to Typography
Look for Typography, Fonts, or Text settings. The exact location varies by theme but is usually under a Design or Branding section.
3
Select or Upload Fonts
Choose from Shopify's font library or upload custom fonts if your theme supports it. Set fonts for headings and body text separately.
4
Preview and Save
Check how your fonts look across different pages and devices before saving. Pay attention to readability at various sizes.

Code Implementation

For complete control over custom fonts, you can add them directly to your theme code. This method works with any font file you have a licence to use.

Step 1: Upload Font Files

Go to Settings > Files and upload your WOFF2 and WOFF font files. Copy the URLs for each uploaded file.

Step 2: Add CSS

Edit your theme code (Online Store > Themes > Actions > Edit code). Add the @font-face declaration to your main CSS file or create a new snippet.

@font-face {
  font-family: 'YourFontName';
  src: url('your-font-url.woff2') format('woff2'),
       url('your-font-url.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Step 3: Apply the Font

Use CSS custom properties or direct styling to apply your font throughout the theme.

:root {
  --font-heading: 'YourFontName', sans-serif;
  --font-body: 'YourBodyFont', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

body {
  font-family: var(--font-body);
}

Using Google Fonts

Google Fonts offers hundreds of free, web-optimised fonts. While convenient, there are performance considerations to keep in mind.

Self-Hosting vs CDN

We recommend self-hosting Google Fonts rather than loading from Google's CDN. This eliminates an external dependency, improves GDPR compliance, and often loads faster due to reduced DNS lookups.

How to Self-Host

1.Visit google-webfonts-helper.herokuapp.com to download fonts
2.Select only the weights you need (typically 400, 500, 700)
3.Download WOFF2 format files
4.Upload to Shopify and implement using the code method above

Performance Optimisation

Custom fonts can significantly impact page load times. Follow these best practices to maintain fast performance.

Limit Font Weights

Only load the weights you actually use. Each weight adds 15-50KB. Stick to 2-3 weights maximum per font family.

Use font-display: swap

This ensures text is visible immediately using a system font, then swaps to your custom font once loaded. Prevents invisible text during loading.

Preload Critical Fonts

Add preload hints for your most important fonts in the theme's head section to prioritise their loading.

Subset Fonts

If you only need Latin characters, use subsetted fonts that exclude Greek, Cyrillic, and other character sets you do not need.

Troubleshooting

Common font issues and how to resolve them.

Font not displaying

Check that the file URL is correct and the font-family name in CSS matches your @font-face declaration exactly. Clear your browser cache and try again.

Flash of unstyled text (FOUT)

This is expected behaviour with font-display: swap. Choose a system font fallback that closely matches your custom font's metrics to minimise the visual shift.

Font looks different on mobile

Some fonts render differently across operating systems. Test on actual devices, not just browser emulators. Consider using slightly heavier weights for mobile.

How to Add Custom Fonts to Shopify