Adding custom font: Font changes but not displayed correctly

I'm trying to add a custom font with an otf file. I added the code below and the font in the preview changes but not to the style I uploaded but to a random one.

Any advice?

Total newbie and really appreciate the help. Thanks!

@font-face {
  font-family: ‘higuen’; 
  src:  url(https://static1.squarespace.com/static/658f4aab85f1351316c41071/t/6590f373f8973a391660bb05/1703998323500/Higuen+Serif.otf);
  }
h1, h2, h3, h4 {font-family: 'higuen' !important;
}

You have an incorrect symbol (top arrows)

10 hours ago, tuanphan said:

You have an incorrect symbol (top arrows)

Good spot! 😃

On 1/1/2024 at 9:31 AM, tuanphan said:

You have an incorrect symbol (top arrows)

thanks for the reply. you mean it is an issue that they don't match? I double-checked and made sure they are the same and now it looks like this but it still doesn't seem to work

 

Hi Luiza! 

Try enclosing the url in '  ' and adding format ('otf') at the end.

src: url('https://.....') format('otf');

On 1/6/2024 at 5:15 AM, Luiza said:

thanks for the reply. you mean it is an issue that they don't match? I double-checked and made sure they are the same and now it looks like this but it still doesn't seem to work

 

Can you share site url? I can check again easier