Changing footer title and shop item titles to custom font

Site URL: https://elk-pear-3wx7.squarespace.com/

Across my whole site, I am trying to change the font to my custom font. It was working great until I set up my shop page. I can't get the titles of my products to be the custom font. I've also found that my site footer, which has a newsletter block, also has a title that isn't the custom font. Right now, I have all of this code:

@font-face {

    font-family: 'Arnold';

       src: url('https://static1.squarespace.com/static/6013057248b486140baa3152/t/601594c82d18b947f9ffd4e5/1612027081264/ArnoldBoecklin.ttf');

  }

h1 {font-family: 'Arnold';}
h2 {font-family: 'Arnold';}
h3 {font-family: 'Arnold';}
h4 {font-family: 'Arnold';}
#site-title {font-family: 'Arnold';}
p {font-family: 'Arnold';}
#title {font-family: 'Arnold';}

a {  
font-family: Arnold;
font-size:25px;
 }
sqs-block-button-element {
  font-family: 'Arnold' !important;
  
  #logoWrapper {display: block !important;     padding-top: 40px;
   margin: auto !important;}

header{
   position: fixed;
   height: 190px;
   padding: 0px;
   text-align: center;
   background-color: rgba(74,74,74,1);
   border-bottom: 0px solid #999999;}

 #header #headerNav { 
   display: inline-block;
   margin-top: 45px;
   text-align: center; 
   margin-right:;
 }

 #headerNav nav a {
   padding-left: 15px;
   padding-right: 15px;}
  
  
}

h3 {
font-size: 23px;
hyphens: none;
}

header#header *, footer.sections * {font-family: 'Arnold';}

h3.portfolio-title {font-family: 'Arnold';}

h2.item-pagination-title {font-family: 'Arnold';}

Can anyone help?

I figured out how to change the footer!

footer#footer-sections {
  h1 {font-family: 'Arnold';}
h2 {font-family: 'Arnold';}
h3 {font-family: 'Arnold';}
h4 {font-family: 'Arnold';}
#site-title {font-family: 'Arnold';}
p {font-family: 'Arnold';}
#title {font-family: 'Arnold';}

}

except put your font where i have arnold

8 hours ago, Melody said:

I figured out how to change the footer!

footer#footer-sections {
  h1 {font-family: 'Arnold';}
h2 {font-family: 'Arnold';}
h3 {font-family: 'Arnold';}
h4 {font-family: 'Arnold';}
#site-title {font-family: 'Arnold';}
p {font-family: 'Arnold';}
#title {font-family: 'Arnold';}

}

except put your font where i have arnold

You can combine all

h1, h2, h3, h4, p {
	font-family: 'Arnold';
}

On 2/9/2021 at 2:33 AM, tuanphan said:

You can combine all

h1, h2, h3, h4, p {
	font-family: 'Arnold';
}

 

but it still isn't changing the product grid font? 😞

On 2/12/2021 at 5:06 AM, Melody said:

but it still isn't changing the product grid font? 😞

Use this CSS

.black-bold .products.collection-content-wrapper .grid-main-meta .grid-title {
    font-family: 'Arnold';
}