@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?

Answer 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.

Answer 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/

Answer 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).

Answer 4

I’ll be generating random text, so images are not an option.

You could use a graphics library on the server and draw the images on the fly. I’ve done something similar and it works, but of course it depends on the amount of text you want to draw. Plus if the text repeats at least sometimes, you could cache the images.