Custom font not showing on devices

Hi, I have added a custom font to one of my websites - Santorini, the "My story" font. It shows fine on my end, but for any other website visitor that's not logged into Squarespace, the font is not showing, it shows a default Squarespace font. Can anyone help with this? This is the code I am using (I replaced only the h4 font):

@font-face {   
    font-family: 'Santorini';   
    src: url(https://static1.squarespace.com/static/64abdc234e9a283575b6cd1a/t/64ad3a3f6c672d12571d974b/1689074239532/Santorini.ttf); 
}

h4 {
  font-family: 'Santorini' !important;
}

It looks like you're missing part of the font face code. The full code should have the format section like so:

@font-face {
  font-family: 'Santorini';
  src: url('your-url') format('woff2')
}

In your case, the format would be ttf (not woff2) to match the font file you've uploaded, however I think it's better practice to use woff files rather than ttf.

You can use an online converter like this one: https://cloudconvert.com/ttf-to-woff

The font file in your code doesn't exist. You try upload new one & replace url.

https://static1.squarespace.com/static/64abdc234e9a283575b6cd1a/t/64ad3a3f6c672d12571d974b/1689074239532/Santorini.ttf