Shopify Font Customization

Nekodragon
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
Ninthony
Shopify Partner
1802 261 711

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
Ninthony
Shopify Partner
1802 261 711

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
Nekodragon
Tourist
8 0 5

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

0 Likes
Nekodragon
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
Ninthony
Shopify Partner
1802 261 711

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
Amanda32
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
Ninthony
Shopify Partner
1802 261 711

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
arcform
Tourist
28 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
lens-trends
New Member
1 0 0

Hi I have these issues slowing the speed of my website does anyone know how I can fix these I am not experienced in coding but if you were to walk me through I can figure it out.

Screen Shot 2021-03-18 at 4.19.25 PM.pngScreen Shot 2021-03-18 at 4.19.29 PM.pngScreen Shot 2021-03-18 at 4.19.33 PM.png

0 Likes