Customized font rendering on IOS Safari

Question

Safari for iOS is badly rendering a custom font. What's going wrong here?

Note how different the rendering of the font is: In chrome, the stroke width is thicker. In Safari, the characters are spaced wider. I think chrome's rendering is more correct.

Update: I incorporated the suggestions from answers so far without solving the problem. I have updated the jsfiddle and screenshots. Now I don't use bold or any default-bold tags, just a single font at normal weight. I incorporated @Vizllx's suggestion although it does not seem to help.

Problem example on jsfiddle:

http://jsfiddle.net/c9eP5/9/

@font-face{
    font-family:Lola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
    font-style:normal;
}
.test {
    font-size: 200%;
    font-family: Lola;
    -webkit-text-size-adjust:100%    
}

How it looks in Chrome:

enter image description here

And here's how it does look on iOS Safari ("Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25")

enter image description here

In the real-world problem, I use the regular fontsquirrel font declaration:

@font-face {
    font-family: 'Lola';
    src: url('../fonts/lola/lola.eot');
    src: url('../fonts/lola/lola.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lola/lola.woff') format('woff'),
         url('../fonts/lola/lola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

For safari on windows, we see the same problem, but "-webkit-font-smoothing: antialiased;" fixed it: http://jsfiddle.net/c9eP5/2/ Still looking for a safari-ios fix. — Julian, Jan 13 '14 at 21:38

score 1 · Answer 1 · answered Jan 20 '14 at 14:03

1

First, you have both fonts marked as Bold which may confuse some browsers.

However I had similar problem when including bold font and the solution was NOT to set font as bold but to make it behave as normal with different name and then switch bold using font name. It's not the HTML standard way but it works.

http://jsfiddle.net/nothrem/ALqt8/6/

@font-face{
    font-family:Lola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff');
}
@font-face{
    font-family:Lola-bold;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola_bold.woff) format('woff');
}
h1 {
    font-family: Lola-bold;
}

answered Jan 20 '14 at 14:03

Radek Pech

3,032
1
24
29

Thanks, I updated the Q removing all weight issues - this problem happens with just normal weight. I tried your example in chrome & safari and although it shows as bold on both, there is still a significant difference in the rendering. – Julian Jan 20 '14 at 18:02
Maybe you should try to add other formats as well, e.g. http://www.pmap.co/c/52c0d565/fonts/lola/lola.ttf – Radek Pech Jan 21 '14 at 10:36
In the real-world problem, I do. Does not help. See my update to the Q with source css. – Julian Jan 22 '14 at 05:39
Edit: Does not help. http://jsfiddle.net/c9eP5/15/ TTF isn't supported on chrome or safari. They will use eot, apparently, but same problem. Haven't tried svg, suppose I should. Sigh. – Julian Jan 22 '14 at 06:11
Ok, I did not think this through and TTF was bad example for iOS. But what I ment was that you should include all available fonts in order EOT, SVG, TTF, OTF, WOFF. If you do and it's still not working it may be a problem in the OS version (I've tried it in iOS7 and it seemed to work). – Radek Pech Jan 22 '14 at 10:37
Thanks for testing, @Radek-Pech. Good to know it's working better in later versions at any rate - I assume that's with only woff. SVG is just so big compared to woff, it might not be worth it. – Julian Jan 22 '14 at 20:16

score 0 · Answer 2 · answered Jan 20 '14 at 13:58

0

I see you have definen the font Lola twice with the same name, a different file name, but both definitions have the font-weight:bold; which is obviously a typo but might be a reason that the browser interprete the typo differently.

Nevertheless I have seen with other fonts that iOS and Android devices make the font-weight (without any additional parameter) differently even native. This part of your question was not fully clear to me, what machine and what browser engine creates which result.

answered Jan 20 '14 at 13:58

Christian

4,596
1
26
33

Thanks Christian. I have simplified the example to avoid all weight issues - problem persists. Hope my updates to the Q make it clearer. Thanks for noticing the problem with weights. – Julian Jan 20 '14 at 18:04

Customized font rendering on IOS Safari

2 Answers2