How to Use Web Fonts in Your Shopify Store

How to Use Web Fonts in Your Shopify Store

How to Use Web Fonts in You Shopify Store: 2016Web 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.

You might also like: Font Pairing For Designers 101, Plus 10 Free Font Pairing Tools

Using Google Fonts

How to Use Web Fonts in You Shopify Store: Using Google FontsOne 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.

How to Use Web Fonts in You Shopify Store: Using Google FontsOnce we have our fonts selected, we can copy the code snippet they provided us, and paste it into our HTML files or stylesheets.

HTML

<link rel="nofollow" target="_blank" rel="nofollow" target="_blank" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One" rel="stylesheet">

@IMPORT

<style>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One';
</style>

We can then reference these fonts in our CSS, with the code snippet they provided us:

CSS

font-family: 'Suez One', serif;
font-family: 'Open Sans', sans-serif;

If you’re having any issues using their web fonts, Google Fonts also provides you with a handy getting started guide.

In our Shopify Theme, we can reference the fonts we want to include, using the HTML method by adding the following line of code in our theme.liquid file:

<link rel="nofollow" target="_blank" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One" rel="stylesheet">

How to Use Web Fonts in You Shopify Store: Using Google FontsWe 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:

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700|Suez+One';

body {
font-family: 'Open Sans', sans-serif;
}

h1 {
font-family: 'Suez One', serif;
}

How to Use Web Fonts in You Shopify Store: Using Google FontsAnother 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

How to Use Web Fonts in You Shopify Store: Pairing Web FontsIf 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.

How to Use Web Fonts in You Shopify Store: Pairing Web FontsHere are a couple of other useful sites that can help you select a font pairing:

Font Pair

How to Use Web Fonts in You Shopify Store: Pairing Web FontsFont Pair has a nice filtering system for the different types of styles available on Google Fonts, such as sans-serif/serif, cursive/sans-serif, etc.

The Google Font Project

How to Use Web Fonts in You Shopify Store: Pairing Web FontsIf you’d like to see Google Fonts in all their glory, check out this site for beautiful type treatments and layouts.

You might also like: 10 Web Design Tools to Discover Beautiful Fonts for Your Next Project.

Uploading custom fonts to Shopify

How to Use Web Fonts in You Shopify Store: Uploading Web FontsIf 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.How to Use Web Fonts in You Shopify Store: Uploading Web Fonts

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:

h1 {
font-family: ‘bebasregular’;

}

We have additional resources for using web fonts with Shopify in our theming documentation.

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.

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.

Grow your business with the Shopify Partner Program

Learn more