Change breadcrumbs font to site fonts

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

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?

1 hour ago, bangank36 said:

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

the site is not yet online, it is a trial. so how do I share the link?

https://caterpillar-chameleon-fdl9.squarespace.com/

password: neosvita

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.

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?

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

found the solution

had to change
font-family: brandon grotesque;

to:

font-family: brandon-grotesque;