Problems with @font-face fonts on iPhone

[lee]

The site I’m working on is using two embedded @font-face fonts, both using kits from Font Squirrel. Both fonts display perfectly on all my browsers and iOS simulator, but when I load the site on my physical iPhone, only one font displays properly, with the other falling back to another sans-serif font.

I’ve tried replacing the SVG font and even uploaded the TTF to Font Squirrel to generate a new SVG file, and still no luck. Both fonts are embedded in exactly the same way and come from the same place.

Any ideas? I can’t think of anything else to try.

[lee]

I also tried embedding the font with Google Web Fonts instead, and still ran into the same problem.

[chrisburton]

Link? Name of font?

[lee]

Don’t have a link to my site as it’s all local at the moment.

The font I’m trying to use is Open Sans—specifically the light and light italic variants.

I’m also using the font CAC Champagne from Font Squirrel with no problems at all.

[chrisburton]

The type designer of Open Sans studied at a University where I grew up (unimportant fact).

Anyway. By any chance have you renamed anything in the CSS or font file itself?

[lee]

Have not renamed anything as far as I’m aware. Here is the @font-face code I’m using:

@font-face {
font-family: ‘OpenSansLight’;
src: url(‘../fonts/opensans/OpenSans-Light-webfont.eot’);
src: url(‘../fonts/opensans/OpenSans-Light-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/opensans/OpenSans-Light-webfont.woff’) format(‘woff’),
url(‘../fonts/opensans/OpenSans-Light-webfont.ttf’) format(‘truetype’),
url(‘../fonts/opensans/OpenSans-Light-webfont.svg#OpenSansLight’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

[Paulie_D]

It’s possible the font has been corrupted when downloaded..might be worth downloading again.

[lee]

I tried downloading three times and I’ve tried generating my own @font-face kit from the .ttf file.

[Paulie_D]

This could be nothing but could it be that

url(‘../fonts/opensans/OpenSans-Light-webfont.svg#OpenSansLight’) format(‘svg’);

should be

url(‘../fonts/opensans/OpenSans-Light-webfont.svg#OpenSans-Light’) format(‘svg’);

and that it’s the hyphen in the font name tripping you up?

[lee]

Just tried that…no luck.

I’m don’t recall where I pulled this font-face syntax from but I don’t completely understand all of it. Not sure what function the #OpenSansLight after the .svg serves, but during an earlier test I had a different font name there for the CAC Champagne font I’m using and it still worked on iOS devices. I’ve since changed it but it didn’t seem to create any issues.

[Paulie_D]

Don’t know if this will help: http://blog.echoenduring.com/2011/12/01/quick-tip-svg-fonts-font-face/

[chrisburton]

Renders without a problem when I tested this on my iPhone 4S.
http://christopherburton.net/open-sans/demo.html

[lee]

@Paulie_D: Thanks for the article. Ironically, the font that does work doesn’t match its fragment identifier, and the font that doesn’t work does match its fragment identifier. So somehow that’s not what’s affecting me.

@ChristopherBurton: Your page works for me too.

Digging a little deeper I’ve realized that iOS 5 doesn’t use the .svg file anymore, that’s just for older versions of iOS—it’s actually using the .ttf file. So I’m wondering if that’s where my problem is. I don’t think it’s a font file or css issue—as the font loads properly everywhere else.

I found this article at Font Squirrel: Troubleshooting Font-Face Problems

The only thing I can think of is that somehow the .ttf file is getting blocked through apache or MAMP when I try to view it locally on an iOS device. I tried inserting the first bit of code the article recommends into my httpd.conf file, and no luck there. I would try the second piece of code, but I’m lost as to what my “calling domain” is.

This is the only other thing I can think of, but I need some help with understanding what that article means (what’s an IIS server?). Thanks again for your help with this guys.

[trouille2]

Did you find a solution to your problem? I got it now and can’t get rid of it.

[chrisburton]

@lee It’s a Windows server different than the common Apache server. With an IIS server, you typically need to add a mime type in your htaccess file for @font-face to work.

@trouille2 Can’t get rid of what?

[Author]

Posts