Custom font working in Chrome but not Safari

Hello there, I've installed a custom font which works perfectly in chrome, but when looking on Safari it changes and doesn't look like the font anymore. Images attached below. 

Any suggestions as to how to fix this? 

Code below - 

// CUSTOM FONT
@font-face {
font-family: 'Recoleta-Bold.tff';
src: url(https://static1.squarespace.com/static/64c7aafe7e9cff59734af6b1/t/656ded83f75edf6d56c4141f/1701703043838/Recoleta-Bold.ttf);
}
h1 {
font-family: 'Recoleta-Bold';
font-size: 70pt;
letter-spacing: 1px;
line-height: 140%;
}

h2 {
font-family: 'Recoleta-Bold';
font-size: 50pt;
letter-spacing: 1px;
line-height: 140%;
}

h3 {
font-family: 'Recoleta-Bold';
font-size: 30pt;
letter-spacing: 1px;
line-height: 140%;
}

h4 {
font-family: 'Recoleta-Bold';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
}

Both need to be same, you can remove .ttf from first arrow code

You legend! Thanks.