Custom font not showing on Safari and iOS

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

I have a custom font on my website "Jonathan" . Previously it worked fine on all platforms up until a month ago, when it stopped getting viewed as a script font on Safari and iOS (as far as I can tell) and just shows as a Serif font. Nothing had changed in my CSS. It still 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;

}

Thank you for any help!

Hi

The correct code should be

@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;
}

@tuanphan you are phenomenal, thank you so much!

mine is not showing neither ive revise the code but cant see the fault 

@font-face { font-family: Zephyr; src: url ('https://static1.squarespace.com/static/62ea4b8491cb2a37cd0d6811/t/62ea5c1ec96b280410b563b6/1659526175344/Zephyr.otf');}

H1, h2, h3 {font-family: Zephyr;}

@font-face { font-family: ParisScript-Regular; src: url ('https://static1.squarespace.com/static/62ea4b8491cb2a37cd0d6811/t/62ea5d9f8e042a78b197d460/1659526559339/ParisScript-Regular.otf');}

H4, {font-family: ParisScript-Regular;

On 8/4/2022 at 1:55 AM, jennypetit said:

mine is not showing neither ive revise the code but cant see the fault 

@font-face { font-family: Zephyr; src: url ('https://static1.squarespace.com/static/62ea4b8491cb2a37cd0d6811/t/62ea5c1ec96b280410b563b6/1659526175344/Zephyr.otf');}

H1, h2, h3 {font-family: Zephyr;}

@font-face { font-family: ParisScript-Regular; src: url ('https://static1.squarespace.com/static/62ea4b8491cb2a37cd0d6811/t/62ea5d9f8e042a78b197d460/1659526559339/ParisScript-Regular.otf');}

H4, {font-family: ParisScript-Regular;

What is your site url? We can check code easier

My custom font isn't displaying on Safari or iOS but displays on Chrome. I cannot figure out why. Any ideas?

@font-face {
font-family: Blackstone;
src: url(https://static1.squarespace.com/static/6130e1884d46b23431b36144/t/63b2bc393294e244b7cb8f5e/1672657977926/Blackstone.woff);
}

.sqsrte-large {
font-family: 'Blackstone' !important;
}

22 hours ago, ShannonPruitt said:

My custom font isn't displaying on Safari or iOS but displays on Chrome. I cannot figure out why. Any ideas?

@font-face {
font-family: Blackstone;
src: url(https://static1.squarespace.com/static/6130e1884d46b23431b36144/t/63b2bc393294e244b7cb8f5e/1672657977926/Blackstone.woff);
}

.sqsrte-large {
font-family: 'Blackstone' !important;
}

The font file url doesn't work. You can click link in your code & check

Try upload font again