Shopify Font Customization

Highlighted
Tourist
8 0 5

I am looking to change the header fonts in my site to the google font Marcellus. Is there a way in which I can change that, perhaps by going into the theme code and changing a label or something? Thank you very much!

 

*My theme is Supply

*I tried the app Fontify, but that didn't work (when I tried to apply the changes Fontify said that they were applied, but the site didn't show it even after waiting a while).

0 Likes
Highlighted
Shopify Partner
1427 193 477

You have to link the font from google to your store in your theme.liquid file in your Layouts Folder.

Open the theme.liquid file and Ctrl+f and search for "</head>"

Add this right before the </head> tag:

<link href="https://fonts.googleapis.com/css?family=Marcellus" rel="stylesheet">

</head>

Then open your theme.scss.liquid file in your Assets folder. Paste this to the very bottom:

.section-header--title {
    font-family: Marcellus, sans-serif;
}

Should do the trick. At least, I think that's what you're trying to edit. You just need to find out the class of the things you want to change to that font. Let me know if this works or if you need any more help.

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
1 Like
Highlighted
Shopify Partner
1427 193 477

If you want to change ALL of the h1 h2 h3 h4 h5 and h6 tags to that font, you can ctrl+f in your theme.scss.liquid file and type "h1, h2, h3, h4, h5, h6" and it should bring you right to where you want to be. There will be a scss variable in place after "font-family". You can change that to 

font-family: Marcellus, sans-serif;

This will change all of your heading text if that's what you're after.

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
1 Like
Highlighted
Tourist
8 0 5

I'll try that out! :D
Thanks a lot Ninthony, I appreciate the help.

0 Likes
Highlighted
Tourist
8 0 5

@Ninthony,

I followed your instructions and it worked beautifully, exactly what I wanted it to do. Thank you so much! :D

0 Likes
Highlighted
Shopify Partner
1427 193 477

Not a problem, glad it helped.

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 1

I'm using the Minimal theme and I can't seem to find "h1, h2, h3, h4, h5, h6" in the theme.scss.liquid file. Is there a different way to change the fonts in all of them in this theme?

Thanks!

0 Likes
Highlighted
Shopify Partner
1427 193 477

In Minimal theme it's located in the timber.scss.liquid.

You'll see this:

h1, h2, h3, h4, h5, h6 {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  margin: 0 0 ($gutter / 2);
  line-height: 1.4;

  a {
    text-decoration: none;
    font-weight: inherit;
  }
}

just change the font family in there.

h1, h2, h3, h4, h5, h6 {
  font-family: Century Gothic, sans-serif;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  margin: 0 0 ($gutter / 2);
  line-height: 1.4;

  a {
    text-decoration: none;
    font-weight: inherit;
  }
}

To whatever font you want, but make sure to include the font on your theme.liquid file as shown above if it's not a websafe font.

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
Tourist
27 0 1

Hi,

I would like to change my h1 font to comfortaa-bold and leave h2-6 as comfortaa - how do I chnage this on the minimal theme?

 

Many thanks for your help.

Jenny

0 Likes