Can't get CSS to apply custom font to all headings

I have been trying to apply a custom font to all headings on my site (keelyskitchenandgarden.com) but it only ever applies to a few. I've tried multiple approaches. It will apply the font to most headings on the home page, but not to the product listings, and not to the blog titles (blog page is currently hidden).

This is currently my CSS
 

//ADDING BUFFALO FONT//
@font-face {
font-family: 'BUFFALO';
src: url('https://static1.squarespace.com/static/660f48e3e15bd1013607a18b/t/66107be868fe065b1d3033f0/1712356328291/Buffalo.otf');
}

//ASSIGN BUFFALO FONT//

h1 {
   font-family: 'BUFFALO';
}

h2 {

font-family: 'BUFFALO';}


h3 {

font-family: 'BUFFALO';}


h4 {

font-family: 'BUFFALO';}

Any suggestions?

Thanks @abibacon! That worked!