Jump to content

Change breadcrumbs font to site fonts

Recommended Posts

Hi,

I have 2 fonts selected as site fonts from the square space font list (not custom fonts).
Fonts are: Brandon Grotesque and Garamond. 

The breadcrumbs font is rendered in Garamond, but I want to change it to Brandon Grotesque. I guess the only way to do this is with css. But how does this work without having to upload the font?  I just want to change the font to the other selected (standard) site font.

I use this code but it's not working:

nav.ProductItem-nav * {
font-family: "Brandon Grotesque" !important;  
font-size: 11px !important; 
font-weight: 500 !important; 
line-height: 1em !important;
  letter-spacing: 2px;
text-transform: uppercase !important;
}

 

I also tried with ' instead of "", same result.. I have the same issue for the summary block title.

Thanks

Link to comment
50 minutes ago, antonlecluyse said:

Hi,

I have 2 fonts selected as site fonts from the square space font list (not custom fonts).
Fonts are: Brandon Grotesque and Garamond. 

The breadcrumbs font is rendered in Garamond, but I want to change it to Brandon Grotesque. I guess the only way to do this is with css. But how does this work without having to upload the font?  I just want to change the font to the other selected (standard) site font.

I use this code but it's not working:

nav.ProductItem-nav * {
font-family: "Brandon Grotesque" !important;  
font-size: 11px !important; 
font-weight: 500 !important; 
line-height: 1em !important;
  letter-spacing: 2px;
text-transform: uppercase !important;
}

 

I also tried with ' instead of "", same result.. I have the same issue for the summary block title.

Thanks

Can you share your site with the protected password so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, antonlecluyse said:

So to be clear... I know how to do it by uploading a font (@fontface css), but I want to use the standard font that is in the squarespace font list. That's the thing I am struggling with.

Thanks for your help.

You mean

You want custom font appear in SS Font List >> Not possible

Or

You want to apply SS font to breadcrumb? >> Which font?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I want to apply SS font to breadcrumb, summary block titles,... Now SS uses the paragraph font I selected (Garamond) for the breadcrumb, but I want the heading font I selected (Brandon Grotesque). And change some additional text properties (make it smaller, letter spacing,...)

I know how to upload a custom font using css, change text properties, that is not the issue,  but I don't have that font and I want to use a standard SS font for this site.

So I am looking for the css code to:

1. Change the breadcrumb font from Garamond to Brandon Grotesque
> I know how to target the breadcrumb (nav.ProductItem-nav *) , but not how to apply another SS font.

2. change a couple of properties.
> That I know

Hope I make myself clear.

Thanks

 

 

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.