Hannalarsson

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!!

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

It doesn't work either... Any other ideas?

Okay, thank you! I'm new to this. Do you mean I have to replace the OTFs with woff?

Thank you for helping me! I changed my previous code to the one you gave me, but it still looks the same in Safari. Do you have any other ideas?

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

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?