please help me code a custom font into my shopify menu pages!

Store Design
, ,
1

this is the third time i’ve asked this question i really hope someone can provide me with the right coding.

i already have the custom font coded into the home page, but my menu pages are still the regular themes font. is there a code i can put in that is for the menu pages? exmaple FAQ page, Privacy Policy page, Shipping Policy etc.

my shopify theme is the “Taste” theme.

2

Hello @emotionaldebt22 ,

Could you please share your store URL ( with the password if your store password is enabled ), and the custom font name that you are using? Then I can see and suggest something for you.

Best regards,
GemPages Support Team

3

www.psychosisglobal.com

the font is called “skeletontypeone” i noticed it doesnt show up on my website but it shows up when im customizing the website

4

Hello @emotionaldebt22 ,

I checked and found that you have added this custom code, however, it seems there isn’t the font file

GemPages_0-1669092370193.png
GemPages_0-1669092370193.png1916×965 353 KB

Now, let’s try uploading your font file to the Shopify File

GemPages_1-1669092549000.png
GemPages_1-1669092549000.png1917×936 111 KB

After that, let’s use this code to replace your old code (add your url to replace my demo url):

@font-face {
  font-family: "skeletontypeone";
  src: url("https://cdn.shopify.com/s/files/1/0561/5409/5705/files/CriteriaCF-Medium.otf?v=1669092678");
}

Finally, if you want to apply this font for the header’s menu, you could add this code to the bottom of base.css file:

.header .header__menu-item {
 font-family: skeletontypeone;
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

5

hey it seems to have worked on the home page, but the menu pages have not changed. do you think there is another way to code it in? or did i not use the right file?

also it shows the custom font on my laptop, but the mobile version of the website doesnt display the custom font at all.

6

Hello @emotionaldebt22 ,

The custom font will be applied for the position that you added code. If you want to apply it for all pages. Let’s try using this code:

body {
 font-family: skeletontypeone !important;
}

Best regards,
GemPages Support Team

7

that seems to have done the trick! although the product names havent changed

8

Hello @emotionaldebt22 ,

Do you mean this product name?

GemPages_0-1669395587247.png
GemPages_0-1669395587247.png1919×965 177 KB

Let’s try this code:

.product__title h1 {
   font-family: skeletontypeone !important;
}

I checked and found that your font hasn’t been applied to some texts. You could try this code:

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5, * {
  font-family: skeletontypeone !important;
}

Best regards,
GemPages Support Team