sIFR and TYPO3

"Put simply, sIFR allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses - be that Foundry Monoline, Gill Sans, Impact, Frutiger or any other font - without the user having it installed on their machine." - Anonymous Coward

Sounds pretty good right? So I tried it out and as you can probably see it works pretty good, the titles of the articles on this site are now using the Share font.

Lets try it

One of the downsides of sIFR is that you need to have Flash 8 installed to embed the font into the flash file so it can be used on the site, so if you don't have that you're a bit stuck unless there are other applications that can do the same.

First download the sIFR3 source package, I downloaded the latest nightly build but you can also check out any other version.

Read the documentation to make the required changes or download the files below and use them instead of the source package.

Files

All the files and changes needed to make it work are:

share.swf - the flash file with the Share font embedded
sifr-config.js - to configure which font to use for what
sIFR-screen.css - configure what to hide when sIFR is active (below line 48)
sIFR-print.css - no changes needed in this file
sifr.js - no changes need in this file

TypoScript

I placed the files above all in /fileadmin/sifr/ and then used some TypoScript to load sIFR:

# sIFR configuration
page.headerData.10 = TEXT
page.headerData.10.value = <script src="/fileadmin/sifr/sifr.js" type="text/javascript"></script>
page.headerData.20 = TEXT
page.headerData.20.value = <script src="/fileadmin/sifr/sifr-config.js" type="text/javascript"></script>

page.includeCSS.file003 = fileadmin/sifr/sIFR-screen.css
page.includeCSS.file003.media = screen
page.includeCSS.file004 = fileadmin/sifr/sIFR-print.css
page.includeCSS.file004.media = print

In the end, I think it works better then using TYPO3/ImageMagick to render custom fonts inside an image because search engines and screen readers will just see the regular HTML headers which they can handle better than generated images and with sIFR you are still able to select/copy the text (impossible with an image).

TYPO3 extension (gb_sifr)

After writing this article I found out that there is an extension that apparently allows you to use sIFR inside the Rich Text Editor by using custom tags, I haven't tried it out but it could be useful.

"sIFR" - Scalable Inman Flash Replacement

"Share" - The font I used to test sIFR

Leave a Reply

remember my information