Custom fonts looking different on different computers

I designed a site using custom fonts and uploaded and coded them under the "Custom CSS" window. All of it went well and the fonts look great on my computer. However, on other computers it defaults to backup fonts. How can I resolve this? Thanks!

Hi,

What is your site url? We can check it easier

It's an unpublished site, can you still check it? I'll attach a screengrab of the code I'm using and the site design next to it and here's the url but I'm not sure you'll be able to see it since it's not published:

https://lanternfish-butterfly-sh6h.squarespace.com/

Thanks!

The font files I used are .otf do I need to be using .woff or should .otf work?

What is the site-wide password for your site?

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

We can then take a look at your issue.

Quote

The font files I used are .otf do I need to be using .woff or should .otf work?

There are different formats for font files and not all work equally well for all devices. Please see the following for some guidelines.

https://css-tricks.com/snippets/css/using-font-face-in-css/#aa-deepest-possible-browser-support

Hey! The password is "heysunshine". Thanks for taking a look! I have been unable to re-create the font issue others are seeing from their computers, the fonts look good on my 2 computers, one has the fonts downloaded the other does not. So it's making me think I should use the .woff web versions. Any info. you have is great! 

Try editing your code to this

@font-face {
    font-family: 'HERITAGE';
    src: url('https://static1.squarespace.com/static/6282bfd05635c95091604218/t/629cf5252b8f0b4b82055a62/1654453541469/Heritage+.otf');
src:url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7cf72406b51d52956009/1656716535850/Heritage.woff),url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7d028ede295f34861e6a/1656716546295/Heritage.woff2);
}

h2, h4 {
    font-family: 'HERITAGE' !important;
}
@font-face {
    font-family: 'ISIDORA';
    src: url('https://static1.squarespace.com/static/6282bfd05635c95091604218/t/629cf59822e51c5598b11d22/1654453656967/Isidora+Soft+SemiBold.otf');
    src:url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7ebe74d1da7a60f5153e/1656716990611/isidora_soft_semibold-webfont.woff),url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7ec664c52c697e874912/1656716998666/isidora_soft_semibold-webfont.woff2);
}

h1 {
    font-family: 'ISIDORA' !important;
    text-transform: uppercase;
}