Lessons Learned: Google Fonts in Shopify Store May 11, 2017 05:00 1 Comment

Each Shopify website theme has a list of available fonts built in to the template. We at UPstudio were personally struggling with the default font list. We just weren't happy with how any of them looked on our website. We had originally accepted that 'what you see is what you get' because we were, and still are using a free theme/template (the 'Minimal - Vintage' theme). We figured there are always sacrifices when you choose the free route. Eventually it bothered us enough that we decided to dig a bit deeper. 

I, Mary Beth, am personally tasked with website development and improvement for UPstudio. I'm the first to admit that Google and the Shopify Help Center are my best friends when I am trying to solve a problem. 

Luckily I stumbled upon a very simple fix for our font issue, Google Fonts. All Google Fonts are open source, so you are free to use them in your Shopify store. The Shopify Help Center has a great tutorial on how to add Google Fonts to your theme, check it out here. I wouldn't say these instructions are for the beginner, but they are easy enough to follow. The hardest part for us was deciding on a handful of fonts we wanted to test. Our best advice on that front is to make sure to look at all the characters and make sure they are all acceptable to you. Some have a rogue letter or number that really doesn't appeal to you, and that one letter ends up being on your homepage five times. When you drill down on a font in Google Fonts you can type in specific text to preview.

Our initial short list was:

Once you follow the tutorial once, it is pretty easy to replicate. That being the case, we added our complete shortlist to test them out. Part of the tutorial actually gives you the code to create a new group called "My Added Fonts" to help you easily locate them.

When you add in Google Fonts you can great a new group for "My Added Fonts"

We ended up choosing Opens Sans. We aren't 100% satisfied but it is definitely an improvement. 

Lessons Learned: Google Fonts in Shopify Store

We aren't coding gurus, but if you try out the tutorial and run into any issues, contact us, and we'll try to help.

The next step might be a custom font, we'll keep you posted.