0

I'm using a custom font (Mank Sans) for a website and it should look like that:

https://i.stack.imgur.com/Nnbr7.png (Google Chrome, correct behaviour)

However, when using Safari, it displays weirdly:

https://i.stack.imgur.com/Zxbju.png

How can i fix this problem ?

Thanks.

Edit: Here how i'm including my custom font:

@font-face {
    font-family:'MankSans';
    src: url('#{$font-path}/MankSans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+000D-25CA;
}
Gem
  • 11
  • 2

2 Answers2

0

Try something with this:

letter-spacing: 2px;

Not sure how it would look in chrome though. If it does look weird try detecting safari and then setting the letter-spacing.

var isSafari = /Safari/.test(navigator.userAgent) && /AppleComputer/.test(navigator.vendor);

if(isSafari) {
  //set letter spacing using jQuery or JS DOM
}

http://www.w3schools.com/cssref/pr_text_letter-spacing.asp

Josh
  • 718
  • 10
  • 25
  • Doesn't change, and on my screen you can see i have only the problem when it's F and A, near with F and L, there is no problems. I don't get why Safari "create" problems like that. I don't have problems on Firefox aswell – Gem Jan 17 '17 at 18:25
  • Hmm.. let me do some looking at other issues. – Josh Jan 17 '17 at 18:31
0

Looking at a few other options as you mentioned my previous didn't work.

Option A:

Font-format could be wrong. .ttf is the standard for Safari and Android devices. You can check the details in this question: Safari font rendering issues

Option B:

This answer to the question above has a few more options incase it's a text-rendering issue: https://stackoverflow.com/a/31218373/4314753

Option C:

A few people have said that there is a problem with safari's rendering and what fixed their problems was to define the font-weight: font-weight: 400

Option D:

If it ultimately is a rendering issue and can't find another solution, a hack could be to have an image replace the text even if it isn't as friendly as it could be.

Community
  • 1
  • 1
Josh
  • 718
  • 10
  • 25