Jump to content

Custom fonts looking different on different computers

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Quote

The font files I used are .otf do I need to be using .woff or should .otf work?

There are different formats for font files and not all work equally well for all devices. Please see the following for some guidelines.

https://css-tricks.com/snippets/css/using-font-face-in-css/#aa-deepest-possible-browser-support

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...

Hey! The password is "heysunshine". Thanks for taking a look! I have been unable to re-create the font issue others are seeing from their computers, the fonts look good on my 2 computers, one has the fonts downloaded the other does not. So it's making me think I should use the .woff web versions. Any info. you have is great! 

Link to comment

Try editing your code to this

@font-face {
    font-family: 'HERITAGE';
    src: url('https://static1.squarespace.com/static/6282bfd05635c95091604218/t/629cf5252b8f0b4b82055a62/1654453541469/Heritage+.otf');
src:url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7cf72406b51d52956009/1656716535850/Heritage.woff),url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7d028ede295f34861e6a/1656716546295/Heritage.woff2);
}

h2, h4 {
    font-family: 'HERITAGE' !important;
}
@font-face {
    font-family: 'ISIDORA';
    src: url('https://static1.squarespace.com/static/6282bfd05635c95091604218/t/629cf59822e51c5598b11d22/1654453656967/Isidora+Soft+SemiBold.otf');
    src:url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7ebe74d1da7a60f5153e/1656716990611/isidora_soft_semibold-webfont.woff),url(https://static1.squarespace.com/static/6282bfd05635c95091604218/t/62bf7ec664c52c697e874912/1656716998666/isidora_soft_semibold-webfont.woff2);
}

h1 {
    font-family: 'ISIDORA' !important;
    text-transform: uppercase;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.