- This topic is empty.
February 21, 2012 at 6:46 pm #36770
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.February 21, 2012 at 6:48 pm #97147
I also tried embedding the font with Google Web Fonts instead, and still ran into the same problem.February 21, 2012 at 7:41 pm #97152
Link? Name of font?February 21, 2012 at 10:48 pm #97157
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.February 22, 2012 at 12:25 am #97162
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?February 22, 2012 at 10:09 am #97182
Have not renamed anything as far as I’m aware. Here is the @font-face code I’m using:
src: url(‘../fonts/opensans/OpenSans-Light-webfont.eot?#iefix’) format(’embedded-opentype’),
}February 22, 2012 at 10:28 am #97185
It’s possible the font has been corrupted when downloaded..might be worth downloading again.February 22, 2012 at 10:44 am #97188
I tried downloading three times and I’ve tried generating my own @font-face kit from the .ttf file.February 22, 2012 at 10:58 am #97190
This could be nothing but could it be that
and that it’s the hyphen in the font name tripping you up?February 22, 2012 at 11:31 am #97196
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.February 22, 2012 at 11:38 am #97197
Don’t know if this will help: http://blog.echoenduring.com/2011/12/01/quick-tip-svg-fonts-font-face/February 22, 2012 at 12:05 pm #97202
Renders without a problem when I tested this on my iPhone 4S.
http://christopherburton.net/open-sans/demo.htmlFebruary 22, 2012 at 12:53 pm #97209
@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.March 27, 2013 at 7:29 am #128198trouille2Participant
Did you find a solution to your problem? I got it now and can’t get rid of it.March 27, 2013 at 8:02 am #129857
- The forum ‘CSS’ is closed to new topics and replies.