Do you think that using custom fonts at your webpages is imposibble? Me too. Why?

• you can’t use custom fonts in CSS, because you don’t know if target client has such font installed
• if you use images, the content won’t be indexed by Google

However I came across the sIFR (Rich Accessible Typography for the Masses) project some time ago, which uses Flash to render the headings. What’s the point? Well, let’s see…

1. A page is requested and loaded.
2. Javascript detects if Flash 6 or greater is installed.
3. If no Flash is detected, the page is drawn as normal.
4. If Flash is detected, the HTML element of the page is immediately given the class “hasFlash”. This effectively hides all text areas to be replaced but keeps their bounds intact. The text is hidden because of a style in the stylesheet which only applies to elements that are children of the html.hasFlash element.
5. The javascript traverses through the DOM and finds all elements to be replaced. Once found, the script measures the offsetWidth and offsetHeight of the element and replaces it with a Flash movie of the same dimensions.
6. The Flash movie, knowing its textual content, creates a dynamic text field and renders the text at a very large size (96pt).
7. The Flash movie reduces the point size of the text until it all fits within the overall size of the movie.

Enough chit-chat… go and see the demo

Popularity: 49% [?]