Replacing Fonts
A week online and my third post already. That’s bordering on prolific in my book!
Although, actually this post is more of an experiment than really offering anything new to the site.
Hopefully you will have noticed the rather “stylish” heading to this entry. For the uninitiated, the fonts (typefaces) you see on a web page usually live on your computer. When you navigate to a web page your browser interprets the information it is given and assembles it on your screen pulling the font from a collection on your hard drive.
Obviously this has always been a great hindrance to web designers and developers, there being no point in choosing a beautiful and obscure font to compliment a design when, in all likelihood, the viewer will not have that font installed on their computer, which will then default to a boring, and possibly design breaking, standard font. The only alternative, until relatively recently has been to replace the text with an image of itself. The problems with that being a. Increasing the size of the page in kilobytes, thus increasing loading times. b. Breaking the cardinal rule of mixing content with presentation and, c. Most important of all, taking away the viewers ability to increase the size of the text and also making it invisible to anyone using a screenreader.
For the heading above I have used the sIFR (or Scalable Inman Flash Replacement) technology available here which utilises a combination of Flash and Javascript to hide and replace the text with an embedded font of my choice (here I used “Hobo Std” as a rather extreme example). The beauty of this method is that it can be resized (although I seem to be having issues with that on the Mac) and degrades nicely, if the viewer has no Flash player or Javascript turned off it will default to a prespecified “common” font which means that it will also appear to screenreaders.
The sIFR technique has been around for a while and is being improved upon all the time. I only recently learned how to implement it after reading this excellent article. After that it was just a case of making it apply only to the heading of this specific post and not to the headings on the rest of my site, which required nothing more than a simple conditional statement applied to this posts unique number ID.
I’m currently working on a custom 404 page for this site, which I hope nobody ever sees, and waiting desperately for someone to hire me.
