1 of 2 custom fonts not working on safari/mobile

Site URL: https://isabela.design

Hi I uploaded two custom fonts on my site, Manolete & Helmet. Both are ttf files

I have a Mac & when I run Squarespace on Chrome, the fonts look fine but when I'm on Safari only Helmet shows up. Helmet is also the only font that shows up on mobile (I tried both Chrome & Safari on an iPhone iOS 14.4.2).

I read that I should also include other source files as well but I added the src url for woff/woff2/eot, etc. for Manolete and none of those changed anything, also skeptical because both fonts I used are ttf files so maybe it's the problem with the font itself but I was wondering if anyone has ran into this issue & could give me pointers on how to fix it, thanks in advance!

site: https://isabela.design

password: ivqux2021

Remove this code (It is invalid code)

@font-face {
    font-family: 'Manolete';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/607a43d091aa5a30cbfc3e67/1618625488880/MANOLETE.ttf');
    font-family: 'Helmet';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/6075a8510fc4145c05f2d88b/1618323538013/Helmet-Regular.ttf')
}

Add new code

@font-face {
    font-family: 'Manolete';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/607a43d091aa5a30cbfc3e67/1618625488880/MANOLETE.ttf');
}
@font-face {
        font-family: 'Helmet';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/6075a8510fc4145c05f2d88b/1618323538013/Helmet-Regular.ttf')
}

Also, the site has some small problems

Site URL: https://isabela.design/

1. (Mobile-Homepage) Icon look huge. Want to resize it?

2. (Tablet-Homepage) Icon looks small. Want to increase its width?

3. (Tablet-Overlay Menu) Menu has 2 items only. Want to remove burger & force desktop nav on tablet?

4. (About page) 2 squares..

On 4/18/2021 at 5:01 AM, tuanphan said:

Add new code

@font-face {
    font-family: 'Manolete';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/607a43d091aa5a30cbfc3e67/1618625488880/MANOLETE.ttf');
}
@font-face {
        font-family: 'Helmet';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/6075a8510fc4145c05f2d88b/1618323538013/Helmet-Regular.ttf')
}

 

Thank you so much @tuanphan !

I was having problems with my custom fonts appearing different on Chrome and Safari.

They were displaying on Chrome but not on Safari.

I copy and pasted the above code (and changed the font names and source) and it works now!

I thought that maybe because my site will be in Bulgarian langue (Cyrillic Fonts) that that was causing a problem but when I thought about it - it shouldn't.

Thanks again for this code!

I probably made a typo in my original code.

If you ever are in Bulgaria - you have a drink on me!