Custom font won't show up on Safari or iOS

Site URL: https://www.brandivanderwolfphotography.ca

I have a custom font "Jonathan" as Heading 3. Up until very recently, it worked just fine across all platforms, now it just shows up as a plain Serif font when viewed on Safari. It views fine on Chrome.

Current CSS: 

font-face {
font-family: ‘Jonathan’;
src: url('https://static1.squarespace.com/static/612805b13766f76daeb68027/t/61a8f67ff8c4752974f59c16/1638463103868/Jonathan.otf');
  src: 
  url(https://static1.squarespace.com/static/612805b13766f76daeb68027/t/62c36a9f6b8df8606be4ec2e/1656973986230/Jonathan.ttf)
}

h3 {

  font-family: 'jonathan';

  font-weight: 540;

  font-style: normal;

  font-size: 45px;

  letter-spacing: 0.1em;

  text-transform: normal;

  line-height: 1.3em;

}

I have both the ttf and otf font files uploaded.

Use this new code

@font-face {
    font-family: Jonathan;
    src: url(https://static1.squarespace.com/static/612805b13766f76daeb68027/t/61a8f67ff8c4752974f59c16/1638463103868/Jonathan.otf);
    src: url(https://static1.squarespace.com/static/612805b13766f76daeb68027/t/62c36a9f6b8df8606be4ec2e/1656973986230/Jonathan.ttf);
}

h3 {
    font-family: Jonathan;
    font-weight: 540;
    font-style: normal;
    font-size: 45px;
    letter-spacing: .1em;
    text-transform: normal;
    line-height: 1.3em
}