@font-face is deprecated on the iPhone version of Safari. What are my alternatives?

Question

According to Apple's documentation, @font-face is deprecated for use on the iPhone version of Safari. The iPhone only includes 11 fonts, AFAIK, and, in any case, I need a nice blackletter font for an app I'm building. I'll be generating random text, so images are not an option. What alternatives do I have? Am I stuck with a JavaScript solution like Cufón?

Solution 1

Well, just found out @font-face is NOW support on the current iPhone and iPad. The documentation linked to above, which is Safari CSS Reference Shows the example for how to embed the font.

@font-face {
    font-family: "MyFamilyname", cursive [, ...];
    font-style: normal [, ...];
    font-variant: normal[, ...];
    font-weight: bold[, ...];
    font-stretch: condensed[, ...]; /* Not supported */
    font-size: 12pt;[, ...] /* Not supported */
    src: local("Font Family Name"),
        url(http://..../fontfile.ttf) format("truetype"),
        url(http://..../fontfile.ttf) [, ...];
}

Just wanted to make sure someone else who came along and read this like me, knew the current state.

Solution 2

You can actually use @font-face. You just need to use SVG fonts. There are utilities to convert TTFs to SVGs

See this for more info (not my post)

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

Solution 3

Cufón is really the only solution you'll be able to use out of the box. It has the added advantage of being rather quick on the iPhone since it uses canvas rather than inline SVG, and the generated fonts are typically around 60-80% smaller than the original fonts (when compressed).

Comments

[Harshit Shah]

I've used Cufón before and like it. I want to show a series of numbers in quick succession and I don't think Cufón can change the text once it's been converted.

[Harshit Shah]

I need to show random numbers in quick succession, and in a range of approximately -10k to 10k. Too much to cache. Maybe I need to show combinations of images of the individual numbers, 0-9.

[Nathan de Vries]

Calling Cufon.refresh("selector") immediately after setting the innerHTML of an Cufon'd element to a different value works fine -- there's no perceptible flicker on my desktop, but you'd need to test on a mobile device to see if it performs the change quick enough.

[Harshit Shah]

Ah, right. I didn't know you could do that in Cufón. Thanks!

[samvermette]

Great post. This is a great solution that makes @font-face work in all major browsers.

[James Sutherland]

For numbers, I'd use CSS sprites: generate one PNG with -0123456789, then put each digit as background in a fixed-size div. Just change the vertical offset to change which digit appears in each slot. Nice and quick, a simple object to fetch over HTTP which will then be cached throughout, and no extra server load beyond serving up one static image.

[Paul Shapiro]

This is the way I went with. I think this is better than Cufon personally as it works out of the box, and it's bound to have GPU support somehow. Thanks!

[vernonk]

The problem if you are supporting backwards is that Safari 3 doesn't support SVG, although it does support OTF fonts.

[mikelikespie]

If just using it for better decoration, I feel that the SVG solution is better because it has the advantage of behaving like text as well.

[Albert Renshaw]

If I want to store the font files inside the app so one doesn't need internet connection to load the fonts what would I put for the "URL" parameter of font-face? Please help with my font question here (my html file that uses font-face is in my documents directory and the font files themselves are in my bundle (resources folder): stackoverflow.com/questions/9014211/…