Adding A Custom Font to Studio Theme Help

newmanem
New Member
6 0 0

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?

Replies 7 (7)
GemPages
Shopify Partner
5586 1259 1117

Hello @newmanem 

 

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

Screenshot at Nov 25 19-35-50.png

 

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
newmanem
New Member
6 0 0

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
Shopify Partner
5586 1259 1117

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

e.g: 

Screenshot at Nov 25 20-47-43.png

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
newmanem
New Member
6 0 0

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
Shopify Partner
5586 1259 1117

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>

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
newmanem
New Member
6 0 0

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

Em

GemPages
Shopify Partner
5586 1259 1117

I am glad that my recommendation is helpful to you.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center