@font-face not working in Ipad/Iphone safari/good safari mobile emulator?

[PChuprina]

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 CSS code:

/* Generated by Font Squirrel ([url]http://www.fontsquirrel.com[/url]) 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.

PChuprina

 

[SrWebDeveloper]

"Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages." [source]

Looking at your source, you're using .eot, switch to either .ttf or .otf and Safari 3.1 or later should pick it up. There is no single format that works across all browsers universally because CSS3 is technical still in revision or working draft stage.

For remote iPhone testing (noting the SDK app is by far the better tool) try this: http://www.testiphone.com/

-jim

 

[PChuprina]

My fonts and @font-face work quite well in Safari. The issue is with Safari mobile, or the Safari used in the Ipad or Iphone.

The emulator/tester available at: http://www.testiphone.com/ does not reproduce the same issues seen when testing with Safari on the Iphone or Ipad, the @font-face reproduces quite well. I venture to guess this software is not using the 'svg' file that Safari Mobile uses.

Thanks for your input

PChuprina

 

[SrWebDeveloper]

Don't dismiss the advice out of hand. Honestly, try the other formats. It's worth a shot.

if you have the Safari SVG have you used this test suite?

FYI:

After checking numerous sites, alot of Mac users seem to be saying, "The iPhone Safari has the exact same underpinnings as the Safari browser running on your Mac. There is no difference. Full HTML /CSS3 and Javascript support." Hmmm... Looks like you found a difference! But remember what I said about this feature with respect to CSS3 - it's working draft status, so nothing is guaranteed. Especially since mobile technology is so proprietary and device resources so specialized, vendors are much more careful about what technologies they support (my opinion).

Also, if you're testing using Safari under Windows, it might play a role. You didn't mention which, so just checking.

-jim

 

[PChuprina]

As compared to the desktop Safari, Safari mobile uses the "svg" file for renedering the @font-face tag. So there are major differences, this by its very nature adds a few problems The @font-face tag was originally CSS2.0, depreciated, but brought back to life.

I'm actually testing on a Mac and am downloading Apple's dev tools as we speak in hope of a Safari Emulator that uses the svg file as compared to any other file which would give erronous results compared to actual Ipad and Iphone results. Unfortuantely I do not have the funds to purchase a Ipad at the moment.

Another interesting idea has arisen involving mime types and adding "svg" files to it either through the server or a .htaccess file.

Regards,

Patrick Chuprina

 

[SrWebDeveloper]

All sounds good, but I take it you didn't try another font format. BTW, that's "deprecated", respectfully. The browser based Safari webkit 3.1 re-introduced this feature under CSS3 but limited its support to .ttf and .otf font types.

As to Apache .htaccess and SVG/XML support:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz