All Tutorials

Add fonts to your theme

All Tutorials

Add fonts to your theme

Add fonts to your theme

You can specify the fonts to use in your theme by using Shopify's font library.

Fonts and performance

Most fonts in Shopify's font library are a separate resource, and need to be downloaded by the target browser before the online store's text can be rendered. This impacts the online store's overall performance. To make your theme more performant, you can render text using a system font that is already installed on the user's computer. To do this, add the mono, serif, or sans-serif font family, rather than a custom font, to your theme. These font families appear in the theme editor under the System fonts category.

The font that's used to render the text depends on the user's operating system. Below are some examples of the fonts that might be used to render text when you specify a system font:

  • mono: Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console

  • sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue

  • serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro

About fonts in Shopify's font library

Shopify's font library is a collection of fonts that includes system fonts, a selection of Google fonts, and licensed fonts from Monotype. These fonts are free to use on Shopify online stores, and are provided in both WOFF and WOFF2 formats.

The files for each font include the following Unicode ranges, provided that they are available for that font:

The initial selection of fonts covers a broad range of use cases. Due to licensing restrictions, however, there are some fonts that we aren't able to include. If you need to use a broader range of characters, then you can use system fonts, Typekit, or other solutions.

Personal access to the font files isn't currently available.

Adding fonts to your theme

To add fonts from the library to your theme, you need to do the following steps:

  • Declare a font_picker setting type to allow merchants to select fonts by using the theme editor.
  • Use the setting value (which is provided as a font object) to set the CSS properties, such as font-family, font-weight, and font-style, in the theme’s stylesheet.
  • Use one of the font filters to load the chosen font or to obtain variants of that font:
    • Use the font_face filter to insert the default @font-face declaration.
    • Use the font_url filter to obtain a CDN URL and create a custom @font-face declaration.
    • Use the font_modify filter to obtain other font objects from the same family. You can do this for stylistic use, or to render content authored in a rich text editor that might include bold, italic, or bold-italic text.

Browse available fonts and font families

The following fonts are free to use on all Shopify online stores.

Loading