Search code examples
cssios5fontsmobile-safarifont-face

Custom webfont characters don't appear in Safari iOS 5

[REVISED]

My custom icon font is not rendering in Mobile Safari on iOS 5. I've confirmed that the problem must be with my CSS.

The font works fine on iOS 6 and on desktop versions of Safari, Chrome, Firefox, and IE9 when using the corresponding eot and woff formats generated by http://www.fontsquirrel.com

@font-face

I'm currently using the following simplified @font-face declaration (SASS):

@font-face
  font-family: 'Boundless'
  src: asset-url('boundless.ttf', font) format('truetype')
  font-weight: normal
  font-style: normal

The following HTML works (it renders the desired icon character in Mobile Safari on iOS 5.1:

<h1>&#xf0000;</h1>

However, I see a <?> glyph if I try to render it in the way that Font-Awesome does:

SASS

i.bicon-biology:before
  font-family: "Boundless"
  content: "\f0000"

HTML

<h1><i class="bicon-biology"></i></h1>

Yet Font-Awesome icons render fine on the site.

Does anyone know what might be causing this issue?

I should also add that I tried all the recommendations made here: @font-face not embedding on mobile Safari (iPhone/iPad) and none worked. This includes adding the smiley-face hack, making sure my font urls are absolute, and trying svg fonts (which shouldn't be neccessary for iOS 5 anyway).

Solution

  • Mobile Safari apparently just doesn't like the utf-8 addresses I was using (/0f0000-/0f001e).

    I edited the font to move the characters to the same positions that Font-Awesome uses (/00f000...), and presto, it works!

    I also checked whether adding/removing 0's padding the left made a difference, and it works either way. There's just something about the other address range. :\

    AGAIN: This is only an issue when the codes are used in pseudo element content. As you see above, &#xf0000; (and &#x0f0000;) rendered just fine when it was directly in the HTML.