Adding A Custom Font to Studio Theme Help

[newmanem]

Hi All, 

I've successfully added a custom font to my store using this article https://ezfycode.com/blog/add-custom-fonts-to-shopify

However, I want my custom font to only show as the headings, but it's also switching all the subheadings. I can't figure out how to keep the subheadings as they were as I need a more readable font for the general copy! 

Anyone know how to split the heading and subheading font options out?

[GemPages]

Hello @newmanem 

You added the correct custom font, but maybe you applied that custom font to all heading tags h1, h2 ,h3 ...

So it will apply to all headings and subheadings on the store.
You should write CSS code for the objects you want.
For example, if the heading of the store is an h1 HTML tag, you should only apply it to the h1 HTML tag.

In addition, you can share the URL with the content containing the heading tag, I will assist you to update the CSS code more accurately.

Kind & Best regards!

GemPages Support Team.

[newmanem]

Thank you @GemPages! I've definitly done that. 

My code is below - I just had a try at deleting H2, H3 etc, but sadly that did not work. Sorry, I'm not sure what you mean by sharing the URL, how do I do that?

My code is here

<style>
@font-face {
font-family: "Glitten-Regular";
src: url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.woff?v=1669373741') format("woff"),
url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.woff2?v=1669373741') format("woff2"),
url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.ttf?v=1669373741') format("truetype"),
url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.svg?v=1669376573') format("svg");
}

h1,h2,h3,h4,h5,h6,html,body,*,[id] *{
font-family: "Glitten-Regular" !important;
}
}
</style>

[GemPages]

Please tell me the link to the web page that contains the heading tag. 

e.g: 

[newmanem]

I see! this site isn't live yet (I'm still in draft as it's not finished being designed) so I don't have a URL for the page. Does the site need to be live?

I've gone in to share the preview and the link is https://49qgvykiye0mdlfe-41178333333.shopifypreview.com

Hopefully that works!

[GemPages]

The store header uses the h2 HTML tag.
so you just need to update the code again:

<style>
   @font-face {
      font-family: "Glitten-Regular";
      src: url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.woff?v=1669373741') format("woff"),
           url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.woff2?v=1669373741') format("woff2"),
           url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.ttf?v=1669373741') format("truetype"),
           url('https://cdn.shopify.com/s/files/1/0411/7833/3333/files/Glitten-Regular.svg?v=1669376573') format("svg");
   }
  h2{
    font-family: "Glitten-Regular" !important;
  }
</style>

[newmanem]

@GemPages That's worked!! thank you so so much. 

Em

[GemPages]

I am glad that my recommendation is helpful to you.