Can I add a custom font to my theme?

Pixel Union themes rely on Shopify's Font Picker to provide a broad selection of fonts for your store.

To access these, go to Typography in the Theme settings.

If the font you want to use is not included in the Font Picker, you can modify your current theme.

Modify your theme

It is possible to alter the theme files of a Pixel Union theme to allow for custom font additions.

Before you start, duplicate your theme so you have a backup to return to. In your Shopify admin, go to Online Store > Themes, click the ... (Actions) button next to your theme, and select Duplicate.

1. Make sure the font is licensed for web use, and get the font files in a web format (WOFF2 or WOFF).
2. In your Shopify admin, go to Online Store > Themes, click the ... (Actions) button next to your theme, and select Edit code.
3. In the Assets folder, click Add a new asset and upload your font files.
4. In the Layout folder, open theme.liquid. Just above the closing </head> tag, add a <style> block with an @font-face rule for your font, for example: @font-face { font-family: 'MyFont'; src: url('{{ 'myfont.woff2' | asset_url }}') format('woff2'); }
5. In the same <style> block, apply the font to the elements you want to change, for example: h1, h2, h3 { font-family: 'MyFont', sans-serif; }
6. Click Save, then preview your store to check the new font.

Changes made in the code editor may be lost when you update your theme to a new version, so keep a note of any edits you make.

Want some help adding custom fonts to your theme?

Hire Storetasker