11

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Andrew Hedges
  • 21,688
  • 16
  • 67
  • 79

4 Answers4

18

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.

christophercotton
  • 5,829
  • 2
  • 34
  • 49
  • 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): http://stackoverflow.com/questions/9014211/ios-custom-font-path-for-uiwebviews/9014404#9014404 – Albert Renshaw Jan 26 '12 at 06:25
17

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/

mikelikespie
  • 5,682
  • 3
  • 31
  • 36
  • Great post. This is a great solution that makes @font-face work in all major browsers. – samvermette Feb 06 '10 at 22:02
  • 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! – Paul Shapiro Jun 28 '10 at 02:11
  • The problem if you are supporting backwards is that Safari 3 doesn't support SVG, although it does support OTF fonts. – vernonk Jan 13 '11 at 17:54
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).

Nathan de Vries
  • 15,481
  • 4
  • 49
  • 55
  • 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. – Andrew Hedges Jul 20 '09 at 05:32
  • 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. – Nathan de Vries Jul 20 '09 at 07:39
  • Ah, right. I didn't know you could do that in Cufón. Thanks! – Andrew Hedges Jul 21 '09 at 01:17
  • 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. – mikelikespie Jan 16 '11 at 02:45
0

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.

zoul
  • 102,279
  • 44
  • 260
  • 354
  • 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. – Andrew Hedges Jul 20 '09 at 05:33
  • 2
    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. – James Sutherland May 19 '10 at 21:45