Custom font not displaying on mobile or Safari. How can I solve it?

Site URL: https://yzagacollective.squarespace.com

Hi, 

I bought a custom font and added it to my web with the @font-face tag in CSS. Even though it shows on my desktop (I use Chrome on a mac) it doesnt show on Safari, other laptops that are not mac or mobile.

Here is my CSS code in case Ive missed something:

@font-face {
  font-family: 'yorkshire';
  src: url ('https://static1.squarespace.com/static/5ed8199a3abb3a4b723aeb9c/t/5ed8214ec8268727e40f2fb0/1591222607294/Yorkshire-Regular.ttf') format ('truetype');
  src: url ('https://static1.squarespace.com/static/5ed8199a3abb3a4b723aeb9c/t/5edc289e41190d4542ec5e72/1591486623548/Yorkshire-Regular.woff') format ('woff');
  src: url ('https://static1.squarespace.com/static/5ed8199a3abb3a4b723aeb9c/t/5edc28c52746a420fb9375f9/1591486662269/Yorkshire-Regular.woff2') format ('woff2');
}

h2 {
  font-family: 'yorkshire'; 
}

Ps. the password to the site is: yzagacollective

Thanks to anyone who can help me out 🙂

Which Safari version?

Version 13.1  of safari is the one on my mac.
Latest version of safari and chrome also on my iphone.
Version 83.0.4103.97 (Official Build) (64-bit) for Chrome.

Hope that helps