Jump to content

Font wont work on Safari

Recommended Posts

Hi, 

I have a weird problem with the font on my website (www.odisea.se). The font appears just fine when I use Chrome, but it appears weird when I use Safari. At first, I thought it was a completely different font appearing in Safari, but when I looked closely, I could see that it was the right font (Frutiger). However, the letters became thinner and the letter spacing wider. The weirdest thing with all this, is that on some text (on Safari), the font works just fine and looks like it should. It's not linked to a specific heading or paragraph style, so it's very random. 

At first, I thought the problem was the font format (OTF), but that doesn't seem to be it, as the font does work on some text. I tried fixing the problem by changing the letter spacing, but unfortunately, the text on Chrome looks weird when I do this. 

Please, does someone have a clue on how to fix the problem? 

Link to comment
  • Replies 11
  • Views 337
  • Created
  • Last Reply

Top Posters In This Topic

Yes!

I added site-wrapper yesterday as it very slightly reduced the letter spacing on Safari. 
 

@font-face {
font-family: 'Frutiger Bold';
src: url(https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e1ef5f7eac4fb5196786/1684136431404/frutigerltstd-boldcn%5B60%5D.otf);
}
h1 {
font-family: 'Frutiger Bold';
}
h2 {
font-family: 'Frutiger Bold';
}
@font-face {
font-family: 'Frutiger Thin';
src: url(https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e42e45f41d271e3d566c/1684137006206/frutigerltstd-cn%5B61%5D.otf);
}
.site-wrapper, .sqs-catalog-item-list {
-webkit-font-smoothing: auto;
}

p {
font-family: 'Frutiger Thin';
}

h3 {
font-family: 'Frutiger Thin';
}
h4 {
font-family: 'Frutiger Thin';
}

h1, h2, h3, p {letter-spacing: 0px;}
 

Link to comment

can you try this code 

@font-face {
    font-family: 'Frutiger Bold';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e1ef5f7eac4fb5196786/1684136431404/frutigerltstd-boldcn%5B60%5D.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger Thin';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e42e45f41d271e3d566c/1684137006206/frutigerltstd-cn%5B61%5D.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

h1, h2 {
    font-family: 'Frutiger Bold';
}

p, h3, h4 {
    font-family: 'Frutiger Thin';
}

.site-wrapper, .sqs-catalog-item-list {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
    letter-spacing: 0px;
}

 

LoftyDevs by Widle Studio LLP

email.png
info@loftydevs.com  ||  info@widle.studio
website.png
loftydevs.com  || https://www.widle.studio  
address.png
Ahmedabad, India
 
 
 
 
Link to comment
@font-face {
    font-family: 'Frutiger Bold';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e1ef5f7eac4fb5196786/1684136431404/frutigerltstd-boldcn%5B60%5D.woff2') format('woff2'),
         url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e1ef5f7eac4fb5196786/1684136431404/frutigerltstd-boldcn%5B60%5D.woff') format('woff'),
         url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e1ef5f7eac4fb5196786/1684136431404/frutigerltstd-boldcn%5B60%5D.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger Thin';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e42e45f41d271e3d566c/1684137006206/frutigerltstd-cn%5B61%5D.woff2') format('woff2'),
         url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e42e45f41d271e3d566c/1684137006206/frutigerltstd-cn%5B61%5D.woff') format('woff'),
         url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e42e45f41d271e3d566c/1684137006206/frutigerltstd-cn%5B61%5D.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

Try this code

LoftyDevs by Widle Studio LLP

email.png
info@loftydevs.com  ||  info@widle.studio
website.png
loftydevs.com  || https://www.widle.studio  
address.png
Ahmedabad, India
 
 
 
 
Link to comment

Here is my full code if it's any help.

 

@font-face {
    font-family: 'Frutiger Bold';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e1ef5f7eac4fb5196786/1684136431404/frutigerltstd-boldcn%5B60%5D.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger Thin';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e42e45f41d271e3d566c/1684137006206/frutigerltstd-cn%5B61%5D.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

h1, h2 {
    font-family: 'Frutiger Bold';
}

p, h3, h4 {
    font-family: 'Frutiger Thin';
}

.site-wrapper, .sqs-catalog-item-list {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
    letter-spacing: 0px;
}


// Site Navigation //
.header-nav-item a {
  font-family: Frutiger Thin !important;
}
// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'Frutiger Bold' !important;
}
// Blog Page Post Title //
.blog-title {
  font-family: Frutiger Bold !important;
}
// Blog Page Read More Link //
.blog-more-link {
  font-family: Frutiger Thin !important;
}
// Blog Post Entry Titles //
 .blog-item-title h1.entry-title {
  font-family: Frutiger Bold !important;
}
time.event-date {
    font-family: 'Frutiger Thin';
}

/* remove am pm */
span.eventitem-meta-time {
    display: none !important;
}

  a.eventitem-backlink {
    display: none;
}

/* Hide 'View Event' button */
a.eventlist-button.sqs-editable-button.sqs-button-element--primary {
  display: none;
  }
footer,
footer *
 {
 background-color: #F5F0F0!important;
}

Link to comment
On 7/10/2024 at 4:15 PM, Hannalarsson said:

Here is my full code if it's any help.

 

@font-face {
    font-family: 'Frutiger Bold';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e1ef5f7eac4fb5196786/1684136431404/frutigerltstd-boldcn%5B60%5D.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger Thin';
    src: url('https://static1.squarespace.com/static/5fce4a1ce5cb4c30585fc191/t/6461e42e45f41d271e3d566c/1684137006206/frutigerltstd-cn%5B61%5D.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

h1, h2 {
    font-family: 'Frutiger Bold';
}

p, h3, h4 {
    font-family: 'Frutiger Thin';
}

.site-wrapper, .sqs-catalog-item-list {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
    letter-spacing: 0px;
}


// Site Navigation //
.header-nav-item a {
  font-family: Frutiger Thin !important;
}
// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'Frutiger Bold' !important;
}
// Blog Page Post Title //
.blog-title {
  font-family: Frutiger Bold !important;
}
// Blog Page Read More Link //
.blog-more-link {
  font-family: Frutiger Thin !important;
}
// Blog Post Entry Titles //
 .blog-item-title h1.entry-title {
  font-family: Frutiger Bold !important;
}
time.event-date {
    font-family: 'Frutiger Thin';
}

/* remove am pm */
span.eventitem-meta-time {
    display: none !important;
}

  a.eventitem-backlink {
    display: none;
}

/* Hide 'View Event' button */
a.eventlist-button.sqs-editable-button.sqs-button-element--primary {
  display: none;
  }
footer,
footer *
 {
 background-color: #F5F0F0!important;
}

I see it already worked to me

image.thumb.png.0bb75aa5ef026803fa6a3df1254e6694.png

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

Hello again, 

I've found the problem. The font gets weird when I bold the paragraphs that are coded into Frutiger Thin. So, finally, I have a solution. However, I would be very grateful if someone knew if there was a way to bold some text that is coded into Frutiger Thin. For example, I use paragraph 2 a lot, and sometimes I want it to be bold and sometimes thin. 

Thanks!!

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.