Fonts

You can add fonts to your theme in the following ways:

Shopify 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 all Shopify online stores, and are provided in both WOFF and WOFF2 formats.

The files for each font include the following Unicode ranges, if the ranges are available for the font:

This selection of fonts covers a broad range of use cases. However, due to licensing restrictions, there are some fonts that Shopify can't include. If you need to use a broader range of characters, then you can use system fonts, Typekit, and other solutions.

To learn more about using Shopify’s font library, refer to Add Shopify fonts to your theme.

System fonts

System fonts are fonts that are already installed on a user’s computer. This removes the need for browsers to download the font before rendering text and makes the theme more performant. System fonts are listed with the available fonts, noted with a system badge, and will show under the System fonts category in the theme editor font picker.

If you choose to use system fonts, then the font that’s used to render text will depend on the user’s operating system, however there are three system font types. The following are examples of fonts within those types:

  • mono - Menlo, Consolas, Monaco, Liberation Mono, and Lucida Console
  • sans-serif - Menlo, Consolas, Monaco, Liberation Mono, or Lucida ConsoleBlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, and Helvetica Neue
  • serif - Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, and Source Serif Pro

Add Shopify fonts to your theme

The following outlines how to use fonts from the Shopify font library in your theme:

  1. Add a font_picker type setting to allow merchants to choose their font in the theme editor. The value of this setting is returned as a font object.
  2. Use one of the following font filters to load the chosen font, or any of its variants:
    • Use the font_face filter to insert the default @font-face declaration.
    • Use the font_url filter to access a CDN URL, so that you can create a custom @font-face declaration.
    • Use the font_modify filter to access font variants of the same family. Examples are bold and italic stylings.
  3. Reference the chosen font to set any specific CSS stylings, such as font-family, font-weight, and font-style.

Available fonts

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

Loading