Typography, along with on-screen imagery, is one of the most important ways you communicate with your customers — and Shopify has now made it easier to use a wide variety of fonts in your Shopify theme.
Shopify's new font picker interface, accessible under Sales Channels > Online Store > Themes > Customize > Theme settings tab > Typography, now lets you browse hundreds of popular fonts — both open source and premium.
Many store owners will recognize selections from the popular Google Fonts collection — including Playfair Display, Open Sans, Montserrat and Roboto — and these are still free to use in your Shopify theme.
New selections, however, include select premium fonts from the Monotype collection, including Optima, several variations of Bodoni and Baskerville and Avenir.
The good news here, however, is that despite the "premium" label there's no premium price — Shopify has negotiated a partnership with Monotype to make these fonts available for you to use in your Shopify store at no cost.
Many of the fonts also include multiple weights and styles, such as numerous combinations of bold, light, medium and italic.
Using these styles and weights is a great way to give various typographic elements different looks while maintaining a consistent look.
The complete list of fonts available through both open source and the Monotype partnership is available here.
However, the new font picker doesn't just give you lots of new fonts to use — it also provides a realtime preview of how the font will look in your store as you browse new fonts, without saving or affecting your site.
Using the new font picker
To take advantage of the new font picker functionality and the new built in font support, you will need to update to the latest version of your Shopify theme.
All Out of the Sandbox themes have been updated to support this exciting new feature.
Limitations
- While you can still use fonts not offered in the font picker by installing files and adding custom code, you cannot access or select these in the new font picker interface. To set particular elements to your custom font, you'll need to write custom CSS.
- It's not possible to add additional fonts to the font picker interface — even if they are Google or Monotype fonts. You can contact Shopify support to request a font be added, but this is not guaranteed and can only be done with Google Fonts or fonts Shopify has licensed from Monotype.
- While you can download most open source Google Fonts to your computer to use in other design work, Monotype desktop font licenses will need to be purchased separately.
