Skip to main content

Custom Fonts

Overview​

This Expansion Block allows you to add custom fonts to any theme built on Shopify's Horizon theme system. Specifically, it overrides the four font selection inputs that live in theme settings -> typography in the theme editor.

How it works​

This block uses @font-face to register your uploaded fonts and then overrides Horizon’s built-in font variables. Font variables power every typographic preset in Horizon (h1, paragraph, etc.), so your fonts are applied consistently across your store and all existing font settings will continue to function as normal.

Why use custom fonts?​

In general, we don't suggest custom fonts for your website. While you may need pixel-perfect typography when it's blown up on a billboard or printed for permanent use, the advantages aren't so clear on the web, particularly on mobile devices. Shopify has an extensive built-in font library and using their fonts is just one less thing to have to customize. With that being said, if you are still set on using custom fonts for your website, read on!

Using this Expansion Block​

You'll find this block in the app embeds section of the theme editor. To override the theme settings, enter the URL of the font you'd like to use. Some notes:

  • To keep things simple, this app only accepts WOFF2 font formats, which, at the time of writing, is supported by >96% of all internet users (https://caniuse.com/?search=woff2).
  • For users on unsupported browsers, ensure that you enter the most relevant fallback font family (sans-serif, serif, etc.). If you forget to enter a fallback, we'll default it to "sans-serif".
  • For each font family, you can add four different versions: regular, italic, bold, and bold italic. Remember that these are defined by you. You may like to have the "Light" version of a font be your regular style and the "Medium" be your bold. Whatever you link to will be used accordingly.
  • If you only enter the regular version of a font, most modern browsers will simulate italic and/or bold versions. They won't be pixel perfect but modern browsers are surprisingly good at this.

Font hosting​

You can enter any URL that hosts the font. For the best performance, though, we recommend using Shopify's CDN. To take this option, just upload the font file to content -> files in the admin and copy and paste the link.