Custom Font not displaying in safari

Site URL: https://www.rebeccaannelouisewatson.com

Hiya, 

i am using a custom font 'neue machina', which seems to work on chrome, but doesn't on safari or mobile.

I have tried many custom codes, but none have worked. I am desperate to get this working, so any help would be so gratefully appreciated.

thank you in advance 

Remove all code in Custom CSS & use this new code

@font-face {
    font-family: 'NeueMachina-Light';
    src: url('https://static1.squarespace.com/static/60e5873ca8ce0e29b11d365e/t/60e588f06c0d015ae5599065/1625655536892/NeueMachina-Light.otf')
}

h1, .header-title-text {
    font-family: 'NeueMachina-Light' !important;
}

body#collection-611d3f4927df0f192f3454c7, body#collection-611e272e2378ad76f7db207c  {
.header-announcement-bar-wrapper {
    background: #fff !important;
}}

a {
    text-decoration: none !important;
}
header a {
    background-image: none !important;
}

WAH! Thank you so so so much! 

This is so appreciated!

All the best 

Rebecca 

Hey thank you this helped me too!