Adding custom font to specific collection

Highlighted
New Member
4 0 1

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 either change the font on the entire site or not change the font at all. This code copied 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-COLLECTIONNAME .caption-text .h3, .collection-COLLECTIONNAME 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 since they were uploaded via the assets folder, and it's still not working properly:

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

I even tried uploading an eot, woff, and otf file and it didn't work properly. Any suggestions??

Thanks!

0 Likes