Use Google Fonts

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.

You can add Google fonts to your theme by 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.

1. Find the theme you want to edit, and then click Actions > Edit code.

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

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

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

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

Add the font to the theme editor

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

1. In the Config folder, click settings_schema.json to open it in the online code editor.

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

3. Below the word "Typography", find this line of code:

   "options": [
   

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

   {
     "value": "",
     "label": "",
     "group": "My added fonts"
   },
   

5. 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:

   

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 this:

   {
     "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 in the theme editor.

   {
     "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, and navigation text).