Custom font upload (.otf) not displaying on Safari, but works on Chrome

Site URL: https://gtf-technologies.squarespace.com

Password to access the site is: sustainability

I've added a custom brand font upload to my client's website. It displays perfectly on Chrome, but defaults to a serif font on Safari. I've used custom fonts many times and never had this problem. There are multiple .otf files and I've linked them all in Custom CSS as follows:

@font-face {
    font-family: 'Decimal Bold';
    src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602780700de322bef6cdda/1650468736767/Decimal-Bold-Pro.otf');
    font-family: 'Decimal Semibold';
    src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260279055b5a43970fe6cbf/1650468752519/Decimal-Semibold-Pro.otf');
  font-family: 'Decimal Book';
src:
url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602785cc73d30b0c8e4e45/1650468741689/Decimal-Book-Pro.otf');
    font-family: 'Decimal Medium';
  src:
url ('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260278ba67dc25a0def59f0/1650468747580/Decimal-Medium-Pro.otf')
  }
h1 {font-family: 'Decimal Bold'!important;}
h2 {font-family: 'Decimal Semibold'!important;}
h3 {font-family: 'Decimal Semibold'!important;}
h4 {font-family: 'Decimal Medium'!important;}
sqsrte-large {font-family: 'Decimal Medium'!important;}
p {font-family: 'Decimal Book'!important;}
sqsrte-small {font-family: 'Decimal Book'!important;
}
.header-nav *, nav.header-menu-nav-list * {
    font-family: 'Decimal Semibold'!important;
      text-transform: uppercase; 
}
.sqs-block-button-element {
  font-family: 'Decimal Semibold'!important;
}
.sqs-button-element--primary {
  font-family: 'Decimal Semibold'!important;
}
.user-items-list .list-section-title p {
  font-family: 'Decimal Bold'!important;
}
.user-items-list-carousel__slides h2.list-item-content__title {
  font-family: 'Decimal Semibold'!important;
}
.sqs-block-form .field-list .title {
  font-family: 'Decimal Semibold'!important;
}

Any feedback on possible errors or how to fix would be greatly appreciated!

Your code is invalid. Use this new code

@font-face {
    font-family: 'Decimal Bold';
    src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602780700de322bef6cdda/1650468736767/Decimal-Bold-Pro.otf');
}
@font-face{
    font-family: 'Decimal Semibold';
    src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260279055b5a43970fe6cbf/1650468752519/Decimal-Semibold-Pro.otf');
}
@font-face {
    font-family: 'Decimal Book';
    src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602785cc73d30b0c8e4e45/1650468741689/Decimal-Book-Pro.otf');
}
@font-face{
    font-family: 'Decimal Medium';
    src: url 'https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260278ba67dc25a0def59f0/1650468747580/Decimal-Medium-Pro.otf'
}

h1 {
    font-family: 'Decimal Bold' !important;
}
h2, h3 {
    font-family: 'Decimal Semibold' !important;
}

h4, p.sqsrte-large {
    font-family: 'Decimal Medium' !important;
}
p, p.sqsrte-small {
    font-family: 'Decimal Book' !important;
}
.header-nav *,nav.header-menu-nav-list * {
    font-family: 'Decimal Semibold' !important;
    text-transform: uppercase;
}
.sqs-block-button-element, .sqs-button-element--primary, .user-items-list .list-section-title p {
    font-family: 'Decimal Semibold' !important;
}

Not sure if tuan solved this issue for you.

Sometimes i have converted .otf to other file formats as way of solving an issue like this.

fonts can be of varying quality and sometimes other formats work better.

https://cloudconvert.com/otf-to-woff2

you upload and add to tuan's code in the same way after conversion.