Minimal theme - Using a custom Google font in your theme

From Spiffy Stores Knowledge Base

The minimal theme is designed to use a simple sans-serif font. You can however use any Google font in your store by following the instructions in this tutorial.

Part 1 - Prepare your store to use the custom font


  1. Right click this link and save it to your computer.
  2. Log in to your store, and go to the "Design & assets -> Theme Editor" section. Upload your file in the section titled "Upload a new Theme file".
  3. Still in the the "Design & assets -> Theme Editor" section, click on your "Theme.liquid" file, which appears in the "Store Layout" section. An editor should open up allowing you to edit the HTML code that makes up your theme's layout.

    Scroll through this code, looking in the "<head>" section until you find the last link to a css file. It may look something like this...
    {{ 'hello-there.css' | asset_url | stylesheet_tag }}

    Create a new line under this tag, and add in the following line of code. You can copy and paste it from here if you like;
    {{ 'custom-google-font.css' | asset_url | stylesheet_tag }}

Step 2 - Select your font, and add it to your store


  • Google fonts


1. Go to https://www.google.com/fonts and choose the font you want to use. When you have selected your font, click the "Quick use" icon as displayed in the image to the right.

  • Google fonts


2. Select only one font style, and then scroll down to the section titled "Add this code to your website". Click the "@import" tab and copy the text that is displayed there, for example:

@import url(http://fonts.googleapis.com/css?family=Raleway);

  • Editing your 'Custom-google-font.css.liquid file in your Toolbox


3. Back in your store's Toolbox, scroll down to the Custom-google-font.css.liquid file, and click it to edit it. Replace line 3 with the text you have copied.

  • Editing your 'Custom-google-font.css.liquid file in your Toolbox


4. In Google fonts, scroll down to the section titled "Integrate the fonts into your CSS" and copy the text there. Paste it into line 6 of your Custom-google-font.css.liquid file replacing the text that was there, for example:

font-family: 'Raleway', sans-serif;

When you have done this, click the save button and preview your store. Your store should now be using your custom font.

Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=Minimal_theme_-_Using_a_custom_Google_font_in_your_theme&oldid=5521"