To my dismay i discovered my @font-face font is not working on the Safari mobile browser. I downloaded the font package from Fontsquirrel and yes it does have the font in its svg version. Here is the CSScode:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 20, 2010 05:06:32 PM America/New_York */
@font-face {
font-family: 'ChopinScriptRegular';
src: url('../fonts/ChopinScript-webfont.eot');
src: local('☺'), url('../fonts/ChopinScript-webfont.woff') format('woff'), url('../fonts/ChopinScript-webfont.ttf') format('truetype'), url('ChopinScript-webfont.svg#webfont3FgKTvnt') format('svg');
font-weight: normal;
font-style: normal;
}
div#navbar ul {
/*border: solid red 1px;*/
width: 720px;
margin: 0px auto;
padding: 0px;
font-family: ChopinScriptRegular, Arial, Helvetica;
font-size: 170%;
color: #2a0050;
line-height: 37px;
white-space: nowrap;
}
Have I missed something? Does Safari mobile have a issue with the font-height being in"%?"
Also, does anyone know of a good safari mobile browser emulator that actually reads the fonts in the apparently needed svg version so I can test any corrections? I do not have the Ipad or Iphone and the closest Apple store is a 20 minute drive. Any help would be appreciated.
The pages were tested on a cell phone store on a new Iphone, and at the closest Apple store on a Iphone and Ipad. I would think Javascript would be on, along with being the latest greatest operating system.
Another question to ask is, does it matter which webkit is on any particular phone?
I don’t know if this affects @font-face but it sure does get in the way of stuff like viewport width settings in meta tags and whatnot.
@font-face does not work on my browsers seemingly because i have Javascript off. I don’t know why this would affect a CSS property. Does the device where you see no special fonts have JS enabled? (likely does but doesn’t hurt to be sure)
Hmm, I’ve certainly had fontsquirrel fonts working on the iPhone. I don’t have an iPhone either, but you can download the iPhone Simulator as part of Apple’s developer kit. It’s a huge download, but the Simulator is very handy. Unlike other online testers, it really does show you what you’ll see on an iPhone. You need a Mac to run it though.
I presume the font is working on desktop browsers? If not, your file paths may be wrong… but I doubt that’s the problem.
PS Posting in multiple forums at once is very poor etiquette.
@Ralph.M: Thanks for the link to Apple Dev, much appreciated and am downloading now to give it a try. For your interest there is also a Air2 safari mobile emulator here: http://bit.ly/bVsXlU Unfortunately it already has a @font-face rendering issue, it doesn’t, even if the @font-face tag is used properly with the font. Hopefully that will be corrected in the future. If I discover the answer I will post.
@Stomme poes: My original question is not: could I, should I. The original question is that @font-face is not working in Safari mobile,why? With the other question being a good safari mobile emulator.
Yes it is worth it. Remember there are also wifi connections for both, the expected site visitors are upscale, located in large urban areas, probably with great internet connections mobile or otherwise. Most importantly my client has asked for it.
Is it a good idea to do this to a mobile with a likely-crappy internet connection? People pay per byte sometimes. I would avoid sites that ask me to download a lot of extra stuff at my expense just because it’s nice for Desktops.
PChuprina, This might be helpful in debugging, there’s a free iPhone emulator for Windows that comes with the Chrome style element investigator built in.
