Adding Custom Font on Specific Shopify Collection

Question

I'm trying to have a font appear on only a specific collection on my site. I tried to add this code in both my main.css and my timber.scss and it appeared to change the font on the entire site. This code that I am copying below was also used for a different font on the site and worked successfully, so I'm not sure what's being done incorrectly here.

font-face {
font-family: 'roboto-mono';
src: url('RobotoMono-VariableFont_wght.ttf'), 
     url('RobotoMono-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: normal;
 } 

 .collection-engelwood .caption-text .h3,
    .collection-engelwood span.product_item_price_container, 
    .product-single h1, #ProductPrice, .caption-text .h3, .item-title, .item-price{
   font-family: "roboto-mono", sans-serif !important;
   }




   

I even tried uploading the urls this way and it's still not working properly:

 src: url({{'RobotoMono-VariableFont_wght.ttf'| asset_url }})  format('truetype');

I wasn't sure if the issue was that I needed other files uploaded. Any suggestions??

Answer 1

You're missing the "@" symbol in front of the font-face line, but I'll assume that's a copy-paste error.

It looks like your code is applying the font a bit too indiscriminately:

.collection-engelwood .caption-text .h3,
.collection-engelwood span.product_item_price_container, 
.product-single h1, 
#ProductPrice, 
.caption-text .h3, 
.item-title, 
.item-price{
  font-family: "roboto-mono", sans-serif !important;
}

You're only applying it within the context of .collection-engelwood in the first two instances. All other lines are applying it across the site, eg for every instance of .caption-text .h3 .

Not sure if the format of your code was also a copy paste issue, but making sure your code is super neat will help avoid issues like these, as what you're actually doing wrong becomes much more obvious.