Use Google Fonts

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Google Fonts make it easy to bring quality typography to your online store. All Google Fonts are open source. This means that you are free to use them in your Shopify store.

Adding Google fonts to your theme involves changing your setting_schema.json file. You should only try this if you're comfortable reading and editing code.

  1. Visit Google Fonts.

  2. Use the search and filter functions to find a font you want to use in your Shopify online store:

    Google fonts filters
  3. When you have found a font, press the Quick-use button in the font listing. This takes you to a page where you can select the font styles you want, and get the code that you'll need to use the font in your theme:

    Google fonts quickuse
  4. Click to check the font styles that you want, but watch the page load indicator when choosing your styles. Too many styles might make your store load slower for your customers:

    Google fonts pageload
  5. In the Add this code to your website section, click the Standard tab and then copy the provided code by highlighting it and pressing ctrl + C on a PC or command + C on a Mac:

    Google fonts code
  1. In a new browser tab, open your Shopify admin.

  2. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  3. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  4. In the Layout folder, click theme.liquid to open it in the online code editor.

  5. Find the </head> tag in the code editor.

  6. Paste the code you copied from Google Fonts on a blank line above the </head> tag.

  7. Click Save to confirm the change to theme.liquid.

Add the font to your Customize theme page

In the next steps, you'll edit your theme's settings_schema file to add the new font as an option on your Customize theme page.

  1. Back on the Google Fonts page, in the Integrate the fonts into your CSS section, copy the CSS code by highlighting it and pressing ctrl + C on a PC or command + C on a Mac:

    Google fonts code2
  2. On the Edit HTML/CSS page in your store admin, click settings_schema.json in the Config folder to open it in the online code editor.

  3. Click anywhere inside the code editor window, press ctrl + F on a PC or command + F on a Mac, and find the word "Typography".

  4. Below the word "Typography", locate this line of code:

    "options": [
    
  5. Paste the following lines to create a new font option immediately below the "options": [ line:

    {
      "value": "",
      "label": "",
      "group": "My added fonts"
    },
    
  6. Paste the CSS code that you copied from Google Fonts inside the quotation marks of the value attribute.

  7. Delete the font-family: text and the semicolon ; from the CSS code that you pasted.

    For example, if you wanted to add the font Economica, your CSS code would be font-family: 'Economica', sans-serif;. Deleting those parts of the CSS code would leave you with 'Economica', sans-serif in the value attribute of the font option like so:

    {
      "value": "'Economica', sans-serif",
      "label": "",
      "group": "My added fonts"
    },
    
  8. Type the font's name inside the quotation marks of the label attribute. The name you type here will appear in the font selection drop-down menu on your Customize theme page.

    {
      "value": "'Economica', sans-serif",
      "label": "Economica",
      "group": "My added fonts"
    },
    
  9. Click Save to confirm your changes to the setting_schema.json file.

  10. Repeat the steps in this section for all occurrences of the line "options": [. This will add your new font as an option for all of the customizable text in your theme (for example, button text, heading text, navigation text, and so on).

Want to discuss this page?

Visit the Shopify Community