Jump to content

Custom font not showing on Safari and iOS

Recommended Posts

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!

Link to comment
  • Replies 6
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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;

Edited by jennypetit
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.