@font-face iPad issue

[AndreaCammarata]

Hi guys,
I start form a couple of weeks to develope my iPad application using this great framework, and I can say that is works really great! In fact, this post is not really on Sencha help request, but on iPad Safari Mobile, and I'm sure someone can help me to figure out where the problem is.
I explain my problem:
How the title report, I'm having a CSS3 issue on @font-face testing the application on my iPad, in fact, the problem is only on Safari Mobile, and not on Safari. Safari display the custom font correctly! I already know Safari use custom .svg fonts, so my CSS seems to be configured correctly.

To use this custom font, i downloaded the font-face kit from http://www.fontsquirrel.com, that comes out with a pre configured CSS, a demo page, and all the fonts that I need.
At this point I uploaded the kit on my domain, and tried to open the demo page with all the browsers: "It works!", except, like i say on iPad.
Here is the font face property that comes out with the kit:



@font-face {
font-family: 'ZendaRegular';
src: url('zenda-webfont.eot');
src: local('?'), url('zenda-webfont.woff') format('woff'), url('zenda-webfont.ttf') format('truetype'), url('zenda-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
As i already said, the custom fonts doesn't display ONLY on iPad, but if I edit this propery in the following way



@font-face {
font-family: 'ZendaRegular';
src: url('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.eot');
src: local('?'), url('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.woff') format('woff'), url('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.ttf') format('truetype'), url('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}


It display on iPad Safari mobile too!

So, does someone can tell me what I'm missing? What's wrong with the first @font-face configuration?

My supposition is that on my domain, that font is not really installed like system font, and it is on fontsquirrel.com.
Can this really be the problem?

Thanks

[AndreaCammarata]

Does someone can help me to solve this problem?

[xantus]

Where are your zenda-webfont.* files located? They should be in the same directory as your css, or use a relative path to point to them.

[AndreaCammarata]

As you say, the webfonts are located in same directory of my css, in fact, as I show in my example, i have no problem with every browser except for Safari Mobile on my iPad. If the fonts was in the wrong directory I cannot see the custom fonts even on IE, Firefox and Safari.
This is a very strage issue which I can't really figure out.

[toe]

Andrea,
I hope you have already found an answer but if not here is a solution. I had the same issue and the way I fixed it was to go to http://www.fontsquirrel.com/fontface/generator and generate an SVG version of your font. I went ahead and created them all just I have them, but when you do that it will give you the src css so you will know how to put it in your CSS file.

[AndreaCammarata]

Just to everybody know I solved the problem adding a .svg MIME Type to my IIS server configuration with "image/svg+xml" content.
IIS does not serve "unknow" files so you have to add this extension to let iPad and iPhone display the font properly.
Hope this helps,

Cheers