Custom font CSS won't take to the website - is there something wrong with the code? What other ways can I code this?

I changed templates from Wells to Five, the CSS code on Wells I copied and pasted into the Five template, but the template won't take to the code. Our organisation has a custom font. This is the code that I used:

// Adding Gotham Book Font //

@font-face { font-family: 'Gotham-Book'; src: url(https://static1.squarespace.com/static/5384020ce4b01f43fc27da04/t/5d2d14509251be00011e7995/1563235408693/Gotham+Book+Regular.otf);}

// Assigning Font Sizes //

h1 {font-family:Gotham-Book;font-size:55px; colour: rgb(37, 42, 98);letter-spacing: 2px;}

Is there something wrong with the code? What changes should I make? I need to have different heading sizes and colour changes to the sizes. I've contacted Customer Support already - it is not a bug on their end. Please help.

@soul_capital It should be

h1 {
font-family: Gotham-Book !important; 
font-size: 55px !important; 
colour: rgb(37, 42, 98) !important; 
letter-spacing: 2px !important; 
}

Nice elegant code. Can I use this to set h1 through h6, across all templates? (i'm on Sofia)