My Custom Fonts in my Custom CSS Are Not Working?

Hello!

For some reason my custom CSS font is not working on browsers (other than Chrome) and on all mobiles.

I'm only using one custom font, applied to all of the headers and some buttons.

I've double checked the code and it appears to me that there are no mistakes.

I've also tried adding two src: on for each bit of code and that hasn't helped either.

Here is the code I'm using for the entire website:

font-face {
font-family: 'Sinclaire';
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
}h1 {font-family: 'Sinclaire';}
font-face {
font-family: 'Sinclaire';
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
}h2 {font-family: 'Sinclaire';}
font-face {
font-family: 'Sinclaire';
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
}h3 {font-family: 'Sinclaire';}
font-face {
font-family: 'Sinclaire';
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
src: url('https://static1.squarespace.com/static/63e6381a7bda54190b25aa55/t/650024760b79e94d77bb7c36/1694508150296/Sinclaire-Bold.otf');
}h4 {font-family: 'Sinclaire';}
h4 {font-family: 'Sinclaire';     
  font-size:20px;   }
.sqs-block-button-element {
  font-family: 'Sinclaire' !important;
}
.header-nav-item a {
  font-family: 'Sinclaire' !important;
}
time.summary-metadata-item.summary-metadata-item--date {
    font-family: 'Sinclaire' !important;
}
a.summary-title-link {
    font-family: 'Sinclaire' !important;
}
a.summary-read-more-link {
    font-family: 'Sinclaire' !important;
}
.header-title a {
  font-family: 'Sinclaire' !important;
}

If you can help, I'd really appreciate it!

Thank you!

Sam 🙂

Hey Cass,

Thank you so much for your help! I'm very new to CSS stuff so thank you for fixing the problem for me!

It works great now!

Sam 🙂

11 hours ago, SamFord said:

Hey Cass,

Thank you so much for your help! I'm very new to CSS stuff so thank you for fixing the problem for me!

It works great now!

Sam 🙂

Glad to hear! 😊