Change Font of the Navigation, and of Product Titles

Site URL: https://synthesizer-jellyfish-sfps.squarespace.com/config/design/custom-css

Hi,

I'm trying to change the font of the navigation on the header (the bit on the top left that lists the pages i.e. "Shop" "Our Story"). I want them all to be a font I've loaded in. 

I also want to change the font of the product titles. 

Finally change the button font. I've tried 

button {
    font-family: Grand Slang !important;
}
h1 ProductItem-details-title {
    font-family: 'Grand Slang' !important;
}

for both of these. The form button is in Grand Slang, but not a Shop Now button. 

Thank you! Also i am new to CSS

Hi. Your site is private. Can you setup passowrd & share url?

sorry https://synthesizer-jellyfish-sfps.squarespace.com/config/settings

pw: squarespace

Use this CSS

.header-nav * {
    font-family: Grand Slang !important;
}
a.product-title {
    font-family: Grand Slang !important;
}

2 hours ago, tuanphan said:

Use this CSS

.header-nav * {
    font-family: Grand Slang !important;
}
a.product-title {
    font-family: Grand Slang !important;
}

 

Thanks!

For product title that worked for home page. However it is still default font on the product page. is that a separate code?

Cheers. 

On 1/8/2021 at 6:58 PM, mattyb said:

Thanks!

For product title that worked for home page. However it is still default font on the product page. is that a separate code?

 

Cheers. 

Use new code

.header-nav * {
    font-family: Grand Slang !important;
}
a.product-title, h1.ProductItem-details-title {
    font-family: Grand Slang !important;
}

@tuanphan - thanks, that worked for when you click on the actual product, so the page for an individual product, but not for ht "Shop" page (i.e. where the products are listed side by side). They are still in default font. Code to change for this?

Thank you so much!

On 1/10/2021 at 8:20 AM, tuanphan said:

Use new code

.header-nav * {
    font-family: Grand Slang !important;
}
a.product-title, h1.ProductItem-details-title {
    font-family: Grand Slang !important;
}

 

Also the same for the cart/checkout page! the products are all in default font!

On 1/11/2021 at 5:59 PM, mattyb said:

Also the same for the cart/checkout page! the products are all in default font!

.grid-title {
    font-family: Grand Slang !important;
}
.item-desc a {
    font-family: Grand Slang !important;
}

Checkout page (/checkout): Impossible to apply custom font