Shopify: Add custom font to font picker

While Shopify’s font picker provides a selection of web-safe fonts and Google Fonts, many merchants want to use custom fonts to maintain their brand identity. Let’s explore why this isn’t directly possible through the font picker and what alternatives you can implement.

Why You Can’t Add Custom Fonts to the Font Picker

The font picker in Shopify’s theme customizer is a closed system that only allows:

• Web-safe fonts (Arial, Times New Roman, etc.)
• Selected Google Fonts
• System fonts

This limitation exists because:

• The font picker is part of Shopify’s core functionality
• Custom fonts need proper hosting and licensing
• The system is designed to ensure consistent performance across stores

Workarounds for Using Custom Fonts

1. Using CSS @font-face

The most common solution is to manually add your custom font using CSS:

@font-face {
  font-family: 'YourCustomFont';
  src:
    url('path-to-font.woff2') format('woff2'),
    url('path-to-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Apply the font */
.your-element {
  font-family: 'YourCustomFont', sans-serif;
}

2. Using a CDN Service

You can host your fonts on a CDN like:

• Adobe Fonts (formerly Typekit)
• Cloud.Typography
• Font Pro CDN

Example using Adobe Fonts:

<!-- Add in theme.liquid -->

<script src="https://use.typekit.net/[your-kit-code].js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

3. Upload Fonts to Shopify Assets

1. Upload font files to your theme’s assets folder
2. Add the @font-face declaration in your theme’s CSS:

@font-face {
  font-family: 'YourCustomFont';
  src:
    url('{{ "custom-font.woff2" | asset_url }}') format('woff2'),
    url('{{ "custom-font.woff" | asset_url }}') format('woff');
}

4. Override Theme Settings

Create custom typography settings in your theme’s settings_schema.json:

{
  "type": "header",
  "content": "Custom Typography"
},
{
  "type": "select",
  "id": "custom_font",
  "label": "Custom Font",
  "options": [
    {
      "value": "custom-font-1",
      "label": "Brand Font 1"
    },
    {
      "value": "custom-font-2",
      "label": "Brand Font 2"
    }
  ],
  "default": "custom-font-1"
}

Best Practices

1. Always include fallback fonts
2. Use modern font formats (WOFF2, WOFF)
3. Consider loading performance
4. Ensure proper font licensing
5. Implement font preloading for better performance:

<link rel="preload" href="{{ 'custom-font.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin />

Performance Considerations

When implementing custom fonts:

• Limit the number of font weights and styles
• Use font-display property to control loading behavior
• Consider using a font loading strategy
• Monitor page load times
• Use system fonts for less important text

By following these workarounds and best practices, you can successfully implement custom fonts in your Shopify store while maintaining good performance and user experience.