Adding Google fonts to Shopify

Highlighted
New Member
1 0 1

Hello,

I am trying to add several Google fonts to our website. Per Shopifys guide, I have edited the theme.liquid by adding the following in a blank line above <head>.

<link href="https://fonts.googleapis.com/css?family=Acme|Archivo+Black|Arvo|Baloo+Chettan|Bitter|Bree+Serif|Droid+Serif|Manuale|Merriweather|Montserrat|Nosifer" rel="stylesheet">

The problem I am having is that only two of the font styles have become available for me to use. Any idea why they are not all available?

Thanks,

Susan

1 Like
Highlighted

Hello Susan!

1) Did you use this Shopify guide - https://help.shopify.com/themes/customization/fonts/use-google-fonts ?
2) How do you call the fonts you need? Did you edit the css file?

Sincerely,
Arthur

 

 

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
Highlighted
New Member
1 0 1

When you login to your Shopify dashboard, go to "Online Store", then from the selected theme click the menu "Actions" and select "Edit code".
From "Layout" folder, open "theme.liquid" file by double clicking it, then add your google font import code anywhere inside <head> tags:

 

<link href="https://fonts.googleapis.com/css?family=Tajawal:300,500,700&display=swap&subset=arabic" rel="stylesheet">

Now save, and open from "Assets" folder, these 2 style files "theme.scss.liquid" and "timber.scss.liquid", you will have to do the same for both files.
From the google font page you are importing take the font name, in my case its "'Tajawal', sans-serif;" then on both style files scroll down to "Typography" section and replace these 3 code lines:

 

$headerFontStack: {{ header_family.family }}, {{ header_family.fallback_families }};
$bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};

with:

$headerFontStack: 'Tajawal', sans-serif;
$bodyFontStack: 'Tajawal', sans-serif;
$accentFontStack: 'Tajawal', sans-serif;

Save both files, and here you go!

 

1 Like