Customizing Navigation Font

Shopify Discussion
1

Hi, I have successfully integrated custom fonts to my shopify development store but they don’t seem to be working for the Navigation Menu or Buttons. Can anyone help with this?

Thanks
Dev

2

Hi Junia2! Thanks for much for the response. I went through the steps you suggested. It worked for the buttons! Thats awesome thanks.

It still didn’t work for the navigation fonts.

The fonts seem to be working across the rest of the site great so I am assuming the font files have been uploaded properly. I uploaded OTF files.

Here is the CSS

@font-face { font-family: Salsiccia; src: url(‘https://cdn.shopify.com/s/files/1/0692/9534/1625/files/Salsiccia.otf?v=1732299435’); }
h2,h3,h4,h5,h6 {
font-family: Salsiccia !important;
}

@font-face { font-family: Antisocial; src: url(‘https://cdn.shopify.com/s/files/1/0692/9534/1625/files/Antisocial.otf?v=1732302953’); }
p,body,html {
font-family: Antisocial !important;
}

.btn {
font-family: ‘Salsiccia’, sans-serif !important;
}

nav li a {
font-family: ‘Antisocial’, serif !important;
}

Appreciate the assistance!

Dev

3

Thanks Naeem, I am using the theme.css to integrate custom fonts and not the theme selector. So it doesn’t appear in the typography stack.

Dev

4

Hi :slightly_smiling_face: it actually didnt’ work for the nav only the buttons. Could you help with that?