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?
views:
4517answers:
3
+4
A:
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
2009-07-19 08:34:52
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
2009-07-20 05:32:11
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
2009-07-20 07:39:29
Ah, right. I didn't know you could do that in Cufón. Thanks!
Andrew Hedges
2009-07-21 01:17:47
A:
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
2009-07-19 08:35:23
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
2009-07-20 05:33:22
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.
2010-05-19 21:45:37
+7
A:
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
2010-01-28 01:36:09
Great post. This is a great solution that makes @font-face work in all major browsers.
Sam V
2010-02-06 22:02:43
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
2010-06-28 02:11:15