How to Add Google Fonts to Your Shopify Store
In this article, we will show you how to add Google Fonts to your Shopify theme manually.
Step 1: Finding Google Fonts for your Shopify store
Firstly, you go to Google Fonts official website at: https://fonts.google.com.
- In the Google Fonts search filter sidebar, you can select the category and decide how you want the results presented – by age, popularity or alphabetized by name.
- Under languages, you can narrow your results to typefaces that support English by selecting “Latin”.
- Next, you can check the boxes to open slider menus and fine-tune your options for number of styles (variations on the font, like lighter, bolder, or italic), thickness, slant and width.
You also can use search form to get a right font quickly.
Step 2: Getting Embed Code
After finding the Google Web Fonts that you like, you click on this font to open the font detail. In the detail page, you can set styles for the font.
In the list of the styles, you click on the + Select this style button or – Remove this style button to add or remove it.
The embed code will appear on the right sidebar. You have 2 options to embed:
- <link>: Embed the font with a link tag.
- style: Embed the font in style tab or CSS file
Step 3: Add Google Fonts to Your Shopify Store
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- Under Layout, select theme.liquid.
- Scroll down the page until you find the closing head tag (</head>).
- Paste the embed code before this tag
- Click Save and you are done.
To set this font for any text you can use this CSS rules to specify families.
You can see the CSS rule with the detail page (with embed code).
