Font change across whole site

Hi

I am trying to change to custom fonts but it's only allowing it per page and not across the whole site.

Website: https://www.quepasaibz.com/
Page 1: https://www.quepasaibz.com/que-pasa-restaurant (password: que)
Gallery page: https://www.quepasaibz.com/gallery 

How do I change the code so that it's site-wide? Here's the code I am using 

Quote

@font-face {

 font-family: 'BROTHER-Bold';

 src: url('https://static1.squarespace.com/static/645f4e72a313ef3a7b252e5c/t/64636fa859ab7a5334d47b31/1684238248999/BROTHER-Bold.otf')

}

 

#collection-645f4f9dc6799c79c930d7d9 {

 h1, h2 {

  font-family: 'BROTHER-Bold', sans-serif;

 }

}

 

@font-face {

 font-family: 'Gotham-Black';

 src: url('https://static1.squarespace.com/static/645f4e72a313ef3a7b252e5c/t/64637272326cc43acb71a43b/1684238962665/Gotham-Black.otf')

}

 

#collection-645f4f9dc6799c79c930d7d9 {

 h3, h4 {

  font-family: 'Gotham-Black', sans-serif;

 }

}

I know it's something to do with the ID but I have no idea what!!