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 Consolesans-serif
: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neueserif
: 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 asfont-family
,font-weight
, andfont-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.
- Use the
Browse available fonts and font families
The following fonts are free to use on all Shopify online stores.