Help adding Google fonts to Debut theme

Highlighted
New Member
2 0 0

I've found several guides online for adding Google fonts to the Debut theme on Shopify, but they all seem to be outdated. It generally recommends editing the settings_schema.json, or theme.liquid file. Neither of those files have any font related code in them.

 

I added a reference to the header of my theme.liquid file, but it hasn't shown up in the typography section of my Shopify store. Do I need to do something else? Specifically I'm trying to change the font of the title/logo area (The text next to the logo in the upper left corner) as well as the navigation links.

 

I have a fair amount of coding experience though I'm no professional, so I'd prefer to learn to do this myself rather than pay someone to do it for me. If anyone could point me in the right direction or let me know what to do, I would be really grateful.

0 Likes
Highlighted
Shopify Partner
1206 162 329

I don't think that you can add fonts to Shopify's Font Library, so you wont be able to do it through the customize editor. You can import the font in the head of your html, which would be in theme.liquid. I suspect you've already done that. Then you can reference the file in the CSS. So for instance after I embed this to the head:

<head>
<link href="https://fonts.googleapis.com/css?family=Fruktur&display=swap" rel="stylesheet">
</head>

 

If I had a div that I wanted to apply that to, say it had a class of "custom_content":

<div class="custom_content">
Here's some text I want to apply a custom font to.
</div>

Then I'd target it with CSS in the theme.scss.liquid file:

.custom_content {
font-family: 'Fruktur', cursive;
}

When you select the font in google fonts it'll give you the instructions at the bottom right:

 

font-selection.jpg

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
2 0 0

Thank you so much for your help. That worked!

0 Likes