Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Font of the Navigation, and of Product Titles


mattyb

Question

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

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0
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. 

Link to post
  • 0
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;
}

 

Link to post
  • 0

@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;
}

 

 

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...