Custom Font not showing on Safari and iOS

Site URL: https://bozoo.it/

Hello,

I m having trouble with my website.

I uploaded a custom font in CSS but it is not showing the right one in Safari/Android and Chrome from Android mobile

HERE THE CODE USED AT THE MOMENT

/* custom font*/
@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face {);
} 

// Newsletter Form Title //
.newsletter-form-header-title {
  font-family: NeueHaasUnicaW1G-Bold !important;
}

// Newsletter Form Description //
.newsletter-form-header-description p {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Newsletter Form Fields //
.newsletter-form-field-element {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Newsletter Form Button //
.newsletter-form-button {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Newsletter Form Footnote //
.newsletter-form-footnote {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Site Title //
.header-title-text a {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Site Navigation //
.header-nav-item a {
  font-family:NeueHaasUnicaW1G-Regular !important;
}

@font-face {
font-family: NeueHaasUnicaW1G-Bold;
src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339aee0e0b2951ae90bd2ff/1664724704997/NeueHaasUnicaW1G-Bold.otf@font-face {);
} 

h1 {
font-family: 'NeueHaasUnicaW1G-Bold';
}

h2 {
font-family: 'NeueHaasUnicaW1G-Bold';
}

h3 {
font-family: 'NeueHaasUnicaW1G-Bold';
}

p {
font-family: 'NeueHaasUnicaW1G-Regular';
}

// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: NeueHaasUnicaW1G-Regular !important;
}

Thank you in advance

I've noticed that the custom font is not visible also in Chrome on Windows

Check your @font-face declarations:

@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face {);
} 

you have @font-face { inside the brackets at the end of the font file's URL for both of them which is likely what's causing the issue.

Remove the two instances and you should be good. Otherwise we'll keep investigating.

@KwameAndCo You mean like this?

@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src:url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face);
} 

I've tried and it's still not visible.

Remove this underlined bit.

@font-face {
font-family: NeueHaasUnicaW1G-Regular;
src:url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face);
} 

@KwameAndCoThank you! It works pretty good!