Change site title to a custom font in Om Template using CSS

Hi,

I am using Om Template for my website. I have bought a font that I would like to use for my site title. I have looked through the online help and am still stuck with this.

I know I am on the right path because using css code I am able to change the Heading 1 or Heading 2 or Heading 3 to use this custom font.... but I just cannot figure out how to change the site title. The custom font is not available in the list of fonts available under Site Styles | Typogrpahy | Site Title. So I have added following code under Design | Custom CSS. Where am I going wrong?

Any help would be much appreciated. You can view the website on : https://interiordesignstein.squarespace.com/

// Adding Leyton Font
@font-face {
  font-family: 'Leyton';
  src: url(//static1.squarespace.com/static/5d71b8d9e71af8000103a6ea/t/5e0d887f014e1a25d2e580a0/1577945215697/Leyton-Regular.otf);
}

//change the heading 1 font
h1 {
  font-family: "Leyton";
}

//site title does not want to change??
header h1.site-title {
font-family: "Leyton"; }

h1.logo a {
    font-family: 'Leyton';
}

Thank you so much.... that worked perfectly 🙂