How to Use Web Fonts in Your Shopify Store

Web fonts can help create compelling, readable, and beautiful sites that will delight your visitors. The right choice of typography can add character and style to your site, while reinforcing your brand’s image. Most importantly, great typography can provide focus and clarity to content.

In the early days of the web, designers and developers were limited by the amount of fonts that could be used to display text. This was because a font could only render on a web page if it was installed on the visitor’s computer. There were very few fonts that were installed globally, and even then designers and developers often resulted to basic font references, like sans-serif, in stylesheets to ensure a certain set of typographic style.

Thankfully times have changed, and with the help of some great resources and services available to us, we can now use a seemingly unlimited amount of fonts to creatively display our content on the web.

In this article, I’ll run through a few methods you can start using today, that will enable you to use beautiful type and enhance your Shopify stores.

Using Google Fonts

One of the easiest ways to add web fonts to your Shopify store is to use those provided through Google Fonts. In addition to making improvements to their selection, Google Fonts recently released a beautiful redesign to showcase the web fonts they have in their library. They have hundreds of fonts to choose from, and also have a feature that identifies if the font you plan to use will slow down your website.

Once we have our fonts selected, we can copy the code snippet they provided us, and paste it into our HTML files or stylesheets.

We will want to add our code snippet to the theme.liquid file because the Google Font snippet needs to be referenced on every page of your Shopify store. For example, if you only add the code snippet to your product.liquid file, the web fonts will only be visible on your product page.

Alternatively, we can use a stylesheet in our Shopify Theme files to reference the fonts we would like to use. Like our theme.liquid file, we need to make sure the code snippet we use is one of our global stylesheets that is referenced on every page of our site, in order to display our fonts on every page.

In my case, my Shopify Theme styles are in my theme.css file. I will add the following code snippet to the theme.css file to start using the web fonts I selected from Google Fonts:

Another valuable feature of Google Fonts is that you can download the fonts to your machine for free, and use them in your design concepts and local development builds.

Pairing web fonts

If you would like some guidance on pairing fonts, or need a source of inspiration, there are many sites online that can help you out. My personal favorite for finding sources of inspiration is Type Wolf, which also has a page dedicated to Google Font combinations. This site provides you with a list of the top 30 Google Font combinations, and offers real world examples of sites using those exact combinations.

Here are a couple of other useful sites that can help you select a font pairing:

Uploading custom fonts to Shopify

If there isn’t a font on Google Fonts that you would like to use, or you want to use a custom web font that you have purchased, there are a few simple steps that you can follow to use this font on your Shopify store.

I use Font Squirrel to find web fonts I can download and use on my store. I like Font Squirrel because you can download web font kits that will make sure your font works on all major browsers, by including the following font formats:

TTF — Works in most browsers except IE and iPhone

EOT — IE only

WOFF — Compressed, emerging standard

SVG — iPhone/iPad

With my fonts downloaded from Fontsquirrel, I will upload them to the assets folder in my Shopify store.

In this scenario, I want to organize my web fonts into a separate stylesheet. That’s why I created a new stylesheet in my assets folder, and named it webfonts.css. Now, I’ll reference my new stylesheet in my theme.liquid file:

{{ “webfonts.css" | asset_url | stylesheet_tag }}

That’s all there is to it. Now, I can reference my new font in my other stylesheets as follows:

Enhance your Shopify store with web fonts

Typography can be quite intimidating to designers and developers because there is just so much to learn when it comes to what makes great web type. The good news is that there are many helpful resources out there, such as the pairing sites mentioned earlier in this post, to help you get started.

Also, we should learn from what others are doing, and have fun with our typography. The web is mature enough that we can use web fonts to create compelling, readable, and beautiful sites that will delight our visitors — so use them.

If you want to learn more on typography, I suggest reading On Web Typography by Jason Santa Maria.

If you have any great examples of web typography that you would like to share, please let us know in the comments.

Email address

Password

Your store name

Let’s grow your freelance or agency business.

Get design inspiration, practical takeaways and free resources to help you find and delight clients.

Email Address

Thanks for subscribing

You’ll start receiving free tips and resources soon. In the meantime, find out how Shopify’s Partner Program can help you grow your business.

About the Author

Levin is a self-taught designer and front-end developer whose passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC, and now works for Trello.