Knowledge Base

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.

Choose a font and copy the link 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.
   

3. Click the plus button for each font style that you want.
   

4. Click (x) Families Selected at the bottom of the page to view the fonts you have selected.
   

5. Copy the code in the Standard area by highlighting it and pressing ctrl + C on a PC or command + C on a Mac.
   

Add the link code to your theme

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:
   

   
   

   
   

   
   

   
   

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).