Trying to use a custom font for header:branding

Site URL: https://www.ninelives.net

Please help:
I'm trying to use a custom font for my header:branding in my Squarespace Website (So it's where you type in the name of your business).

The font "Roster Compressed Semibold" was there from the beginning as part of my website design, then one day it inexplicably disappeared. So I purchased it again, but now I don't know how to implement.
The code I tried is:

@font-face {

    font-family: 'RosterCompressed';

       src: url('FontURLhttps://static1.squarespace.com/static/5e65fd8479afc765168721e3/t/5f2da4140bb8936f5e442e5c/1596826644729/Roster+Compressed+Semibold.otf');

  }

#header * {

 font-family:’RosterCompressed‘;

 font-size:27px;

 color:#000000;

 font-weight: 400;

   }

then I tried:

#header h1.site-title { font-family: "RosterCompressed";

font-size:27px;

 color:#000000;

 font-weight: 400;

}

Neither of these changes anything
My default header:branding font remains set as ROBOTO SLAB


Also, ROBOTO SLAB looks like it should on desktop, but is a completely different font on mobile - no matter how many times I clear cache and refresh.



 

Use this CSS

@font-face {
    font-family: 'Rostercompressed';
    src: url('https://static1.squarespace.com/static/5e65fd8479afc765168721e3/t/5f2da4140bb8936f5e442e5c/1596826644729/Roster+Compressed+Semibold.otf')
}
a.Mobile-bar-branding, a.Header-branding {
    font-family: 'Rostercompressed' !important;
}

THANK YOU Tuan !!!!!

(I have been struggling with this issue for 27 days - many many hours online trying to find the answer).

One more question please:
If I want a fraction more space between the Roster Compressed letters on my desktop - do I alter the CSS you provided? 
And, if so, please would you recommend what this code is?

Erich.