How can I customize fonts for my main menu and product titles?

Store Design
1

I would like to use custom font for my main menu (navigation) and product titles (in each product page).

Any suggestion?

Thanks in advance

2

@spookiesdream ,

You can add a font, So you will need to do it manually.

If you are using google font then see here : https://fonts.google.com/

download the font and upload the font files to the Asset folder.

Then in the base.css file at the end. Paste the below

@font-face {
  font-family: 'FONT NAME';
  src: url("FILE NAME.woff2") format("woff2"),
       url("FILE NAME.woff") format("woff"),
       url("FILE NAME.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}

after that you have add the css like this

h1, h2 {
font-family: 'FONT NAME'
}

Refer this link, If you dont get above method,

https://ezfycode.com/blog/add-custom-fonts-to-shopify

3

Hi,

Thanks a lot. By changing H1 and H2, it will also change all heading and titles right? Is tehre anyway only to change the menu and the product page title?

Thanks

4

@spookiesdream ,

.list-menu--inline span {
font-family: 'FONT NAME'

}
h1.product__title{
font-family: 'FONT NAME'

}
5

Thanks a lot! Last question, can I use one of the existing Shopify fonts without uploading a new font to the files?

Thanks a lot!

6

@spookiesdream ,

Yes, you can use it. by the same way

h1.product__title{ font-family: ‘FONT NAME’ }

7

This is what I’m adding to my base.css but nothing changes :disappointed_face:

.list-menu–inline span {
font-family: ‘QUANTICO’

}
h1.product__title{
font-family: ‘QUANTICO’

}

8

@spookiesdream ,

Share your store URL, please…

Have you included this font in your theme?

9

No I didn’t. I thought it is already in the system (this is from one of the system fonts).
Let me do that.
My store is theoverland.co / pss: theover

Thanks for the support!!

10

@spookiesdream ,

You have to include in it

https://fonts.google.com/specimen/Quantico

11

@spookiesdream ,

I did not find QUANTICO font

oscprofessional_0-1652089937337.png
oscprofessional_0-1652089937337.png1069×679 36 KB

There are 3 fonts in your theme.

12

I just uploaded the file but still can not see the changes. I converted the tff to woff as well.

@font-face {
font-family: ‘QUANTICO’;
src: url(“QAUNTICO.woff2”) format(“woff2”),
url(“QAUNTICO.woff”) format(“woff”),
url(“QAUNTICO.otf”) format(“opentype”);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

.list-menu–inline span {
font-family: ‘QUANTICO’

}
h1.product__title{
font-family: ‘QUANTICO’

}

13

@spookiesdream ,

Try to add this way.

https://www.huratips.com/tech-tips/how-to-add-google-fonts-to-your-shopify-store.html