Custom Font won't appear on mobile or other devices

Hi, I've got a custom font uploaded to my website - it works fine on my desktop, but won't work on other devices (just shows a default font). Not sure if there's anything else I need to adjust in the settings - I don't have a lot of experience with CSS, just wanting the headings to appear in a different font. Can anyone please help?

www.elvenecreative.com.au

p: love24

This is my code:

@font-face {

font-family:Ginger;

src:url(https://static1.squarespace.com/static/65202150cc7a1c03b1a5f074/t/652cb4852f05720e2a8136af/1697428613334/Ginger.otfinsert url);

}

h1 {font-family:Ginger;
}
h4 {font-family:Ginger;
}

Thanks!

By the way, I checked your site that the font on desktop does not like the image you attach

You should check your font file again. It should be the .tff file, something like this

Hey BeyondSpace,

I've uploaded the .ttf file and it now works! Thanks so much 🙂