CODEWITHSUNDEEP
iosiphonesafarifont-facewebfonts
Julian
Julian

Reputation: 2835

Customized font rendering on IOS Safari

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

Upvotes: 2

Views: 2486

Answers (2)

Radek Pech
Radek Pech

Reputation: 3098

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

Upvotes: 1

Christian
Christian

Reputation: 4641

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.

Upvotes: 0

Related Questions