Sunday, February 28, 2010

Embedded Font Support Test

CSS 3 will eventually include standards for code that tells browsers to temporarily download normal .ttf and .otf fonts needed to display text when they are not present on the machine, and the latest Safari, Chrome, and Firefox browsers already support this feature. Some additional info can be found here.

I've seen a report that Mobile Safari (e.g. iPad, iPhone) does not support embedded fonts, unless they are converted to SVG format.

I have put up a test page that should make your browser download the Gardiner font (assuming you don't have it already) to display some of the Egyptian heiroglyphs which start at U+13000 in Unicode 5.2. It may take a bit of time for the characters to show up.

This technique has interesting potential for enabling the display of uncommon language scripts without requiring the viewer to deliberately download and install special fonts.


Bitigçi 比鐡忱 said...

Hmmm. I have designed a Unicode 5.2 Orkhon font, but though it is installed on my system, no way I cannot see it on Safari. If you want, I can send the font here.

I'd appreciate any help.

Tom Gewecke said...

Send me a copy (tom at bluesky dot org) and I will have a look.

Andrew West said...

The interesting thing is that although your test page does not render correctly in IE8, it is downloading the font (shows "Downlaoding data: ''" on the status bar for a few seconds the first time the page is loaded), so it must recognise and understand the @font-face syntax. But if it is going to the trouble of downloading the font, why does it not use it? I wonder if this feature would work with a Unicode script that IE8 knows about.

Tom Gewecke said...

Andrew -- If I understand it right, IE does understand @font-face, but only works with the proprietary MS .eot format, not with .ttf or .otf. No other browser works with .eot. Whether IE will be modified to support the others I don't know.

Anonymous said...

With the hieroglyphics, is the fifth character from the left a rectangle?
That's what I get with Safari 4.04, OS X 10.5.8. the others look like hieroglyphics (in a good way!)

Chris Thompson

Tom Gewecke said...

Chris -- Yes, that is U+132AA, Gardiner Q3, "p", a rectangle.

Chris Thompson said...

re the rectangle: that's about the only time a rectangle is the desired result - I usually see them in InDesign meaning "this font doesn't have that character".
(just spotted Name in the post options)