Fonts in Shopify

In this post I want to list a few key points when choosing font families for your Shopify store with performance in mind.

Custom fonts

I know your designer hand-picked a few options for you to choose. However in my experience custom fonts aren't worth it. A few drawbacks with Custom fonts:

  • Licensing. Most likely you'll have to buy your custom font. Sometimes licensing also prevents you from converting the font files to the file type you want. Or prevent you from downloading font files at all.
  • Implementation. Not a huge problem, but unless you have some coding knowledge you'll have to use someone's help.
  • Performance. With custom implementation of fonts, there is no chance users' browser has font files cached. If you're going to use Adobe fonts, it will bring even more trouble, because they won't let you download any files, locking you into using Typekit. Typekit is Adobe's way of delivering you fonts in a javascript file, which will pull the font files from Adobe servers. 3rd party scripts and server requests never help with performance.

All in all, Custom fonts is the least preferable option, at least performance-wise. If you really want that custom font, make sure its files are hosted and served from Shopify servers to avoid 3rd party requests.

Google fonts

If you can pick a font from a list of Google Fonts, that's great. A few advantages of this route:

  • Performance. This is the second best option when it comes to performance because of caching. If you use some popular font, chances are your customers' browser will already have it cached, and therefore it won't take any additional time to load.
  • Free. An obvious one.
  • Ease of use. Your theme likely supports Google Font from the start, so it's going to be as easy as it gets.

Some examples of popular Google Fonts include: Open Sans, Roboto, Lato, Helvetica, Montserrat.

Shopify's new font_picker

If your theme is fairly new, it probably supports the latest Shopify's own solution for fonts. It's a partnership with Monotype, which offers hundreds of nice fonts for you to choose, as well as Google fonts. It offers the same advantages as the Google Fonts option. The only disadvantage is that your theme has to be new (or frequently updated) to get this functionality.

Web-safe fonts

The best option for performance. Web-safe fonts are fonts included in any browser your customer happens to use. One of these will also be used in case your fancy fonts fail to load for whatever reason. These are: Arial, Courier New, Georgia, Times New Roman, Verdana. If you think you can sacrifice some prettiness in fonts, these are great option, because nothing will have to be loaded to see the text.

Conclusion

A brief overview of your options regarding using different fonts. The best option would be using web-safe fonts, especially if you're aiming for simplicity. Runner ups are Shopify's font_picker solution or Google Fonts. The worst option is to use custom fonts.

As custom fonts probably won't make or break your store, I would recommend sticking to Google Fonts. It offers a good balance between performance (by utilizing cached fonts) and typography that looks nice. It won't be too hard for your designer to pick a nice font combinations there.

If you want to go maximum performance - pick web-safe options. There are really successful stores out there that utilize them.

Also, keep the total number of fonts on your store to 2-3. When changing fonts site-wide, make sure that old unused fonts are deleted.