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! 

Hi all,I have this the other way around.. My uploaded fonts work in safari but in chrome they suddenly are changed in not the font I have upload. In the picture below a picture. @KwameAndCo, canyou help me out?

@font-face {

    font-family: 'Sombra';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/649b017e011148431501e6d1/1687880062743/Sombra-Medium.otf');

  }

h1 {font-family: 'Sombra';}
@font-face {

    font-family: 'Sombra2';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/649b017180cc59430f77815a/1687880049395/Sombra-Bold.otf');

  }

h2 {font-family: 'Sombra2';}

@font-face {

    font-family: 'Fontwolf2';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/64bd4e0542738e3257eb8586/1690127877277/font.woff2');

  }

@font-face {

    font-family: 'ScalaSansProBold';

       src: url('https://static1.squarespace.com/static/649afdb7826c3b5cbe03e79c/t/64bd4e0542738e3257eb8586/1690127877277/font.woff2');
 }
H3,H4,p {font-family: 'ScalaSansProBold';}

@Dieneke try adding !important to the font-family declarations.

Otherwise send me a screenshot or link to the site.