/Flash/ Use custom type with sIFR
31/03/2008 | Filed under Develop > Flash
Don’t let system fonts ruin the look of your site! Paul Wyatt explains how to make your headers look stunning with Scalable Inman Flash Replacement
sIFR has been used to create effective custom headings for major brand websites, including Aston Martin, Nike and ABC News. In this tutorial, you’ll learn how to use it on your own web pages. I’ll show you how to beautify the web and create accessible, compatible and SEO-friendly web headings. The sIFR workflow is straightforward: it’s simply a case of creating a bare-bones HTML page, adding CSS, creating a SWF file that contains your chosen font, then linking sIFR text to the SWF.
There’s also some advice from the pros. Fresh from creating a new typeface for The Times and working with Nickelodeon and Coca-Cola, Luke Prowse gives his best-practice tips on using type on the web. Michele Giardi is responsible for creating the sIFR-friendly “My X factor” component of the official The X Factor site, and he shares his insights on accessibility and using sIFR.
About the author:
Name: Paul Wyatt
Site: www.paulwyatt.co.uk
Areas of expertise: Web design, motion graphics and video
Clients: Lycos, Universal, Five
Favourite holiday food: Belgian waffles
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
James Harrow / 01/04/2008 / 12:54 / http://www.health-news.us/
Thank you very much for this great tutorial! I had some trouble with proper implementation of fonts and I knew that the problem could be solved using flash, but I wasn't sure how to actually do it. Luckily, all I was looking for is nicely and clearly presented here :)
Mike Lawson / 08/04/2008 / 14:32 / http://www.trcreative.co.uk
Been wondering how sites have done this for some time, great article and a great help!
Publius / 01/05/2008 / 23:02
Either you can use Flash to replace image files for header or init cap text - at a steep cost in processing overhead on the visitor's machine - or you can hide large blocks of text from search engines by using Flash because the user's fonts ain't good enough for you. Either way, you lose, unless the whole point of the site is to impress your client (not the site's visitors) with the elite cutting edge "look". I do admire Adobe's excellent marketing effort with this, though - it's up there with their very costly but eventually successful program to make "Photoshop" [TM] a verb.
William Li / 21/05/2008 / 16:04 / http://psycho-fox.co.uk
I was looking into using this for my portfolio site, but one big flaw - Safari does not like the transparencies and seeing as my target audience would be mac users, this was a big no no for me.
Peter / 03/07/2008 / 16:31 / http://www.das-autopfand.de
Im actually thinking about using sifr to style some headlines on our website. so I really like reading your PDF thanks a lot.
Richard / 11/07/2008 / 12:13
I used this technique on the headings for a new site and it worked perfectly on 2 pages but didn't work at all on the other 2! The only way i could get it to work on these pages was by changing the text! Making it longer seemed to make it work... Any ideas why?
