Font-face font letter spacing too big on iPhone and iPad

Question

I have created a site with some non-web safe fonts. In order to make it show on most devices, I have converted it to all major file formats, including SVG for the iPhone and iPad. However, this does not seem to work on either the iPad or iPhone.

I have done this before on previous sites and it has worked perfectly, but for some reason its not working for me this time. I'd really appreciate if someone can help me out with this.

I have uploaded the site so that I can get some help. I am hoping it is something silly I left out. I have been banging my head against the wall for the past few days. Im hoping one of you geniuses might be able to help me out once again.

The CSS is below:

@font-face {
    font-family: 'Franchise';
    src: url('font/Franchise-Bold.eot?#iefix') format('embedded-opentype'), 
         url('font/Franchise-Bold.woff') format('woff'), 
         url('font/Franchise-Bold.ttf')  format('truetype'),
         url('font/Franchise-Bold.svg#Franchise-Bold') format('svg');
}

The website is www.pikatzu.com/demo

EDIT

Found the resolution to the problem on this thread: @font-face not working in mobile Webkit However, the letterspacing on the font on the iPad and iPhone is HUGE. Is there anyway to fix this??

Thanks again in advance

This is because i was applying a fix i found on another site. However the letterspacing on the resulting font is HUGE. Does this look similar on your browser, or do i need to clear my cache or something? — Seedorf
I don't know about your letterspacing issue, but as an aside, I'd recommend using a different syntax. The smiley method should be considered deprecated as it doesn't work with Android. Check these alternatives: fontspring.com/blog/the-new-bulletproof-font-face-syntax or readableweb.com/mo-bulletproofer-font-face-css-syntax — Johannes Pille
STill anyone that can help me with the letter-spacing issue feel free to answer — Seedorf

Seedorf Seedorf · Accepted Answer · 2011-05-22T00:01:27

The problem was the fonts converter i used. I was using fontforge initially. I did a quick search and found an alternative: http://www.fontsquirrel.com/fontface/generator and i would suggest this for anyone else using fontforge.

Thanks guys for your time and input :-)

Sincerely, Seedorf

Font-face font letter spacing too big on iPhone and iPad

EDIT

1 Answers