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.
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
-
Visit Google Fonts.
-
Use the search and filter functions to find a font you want to use in your Shopify online store.
-
Click the plus button for each font style that you want.
-
Click (x) Families Selected at the bottom of the page to view the fonts you have selected.
-
Copy the code in the Standard area by highlighting it and pressing
ctrl
+C
on a PC orcommand
+C
on a Mac.
Add the link code to your theme
- In a new browser tab, open your Shopify admin.
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
-
Find the theme you want to edit, and then click Actions > Edit code.
-
In the Layout folder, click
theme.liquid
to open it in the online code editor. -
Find the
</head>
tag in the code editor. -
Paste the code you copied from Google Fonts on a blank line above the
</head>
tag. -
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.
-
In the Config folder, click
settings_schema.json
to open it in the online code editor. -
Click anywhere inside the code editor window, press
ctrl
+F
on a PC orcommand
+F
on a Mac, and find the word "Typography". -
Below the word "Typography", find this line of code:
"options": [
-
Paste the following lines of code to create a new font option immediately below the
"options": [
line:{ "value": "", "label": "", "group": "My added fonts" },
-
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 orcommand
+C
on a Mac: -
Paste the CSS code that you copied from Google Fonts inside the quotation marks of the
value
attribute. -
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" },
-
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" },
-
Click Save to confirm your changes to the
setting_schema.json
file. -
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).