Fonts and the Web

With my decision to move to Joomla! 1.5 began the long and arduous task of identifying what would work, what would not work, and what possibilities I had to make things cooler. I started out downloading Joomla! 1.5.3 and installing it on a test box so that I could begin exploring. I also began looking over the various templates that are currently available for Joomla! 1.5 to see if there were any I could use as a jumping off point. One of the great things about Joomla! is that they have a huge user community that is very active in the development and use of this Content Management System. When they began developing Joomla! 1.5 the developers opened up a contest for someone to design a new template that would be included as one of the standard templates out of the box. The Joomla! Forums managed the template contest. After several months of work the user community voted and a winner was chosen. One of the less obvious benefits is that all the templates that were entered into the contest were made available for download by the user community. This provided a great abundance of code from which you could learn or in some cases it was an opportunity to find a template that would be perfectly matched to what you were looking for.

Knowing my personality I was confident that I would not find a template that would match the artistic vision I had for Now Hitting. I am eclectic in my style and very specific in my vision. Rather than looking for a template I could use, I started looking at each template to see what pieces I could gather to create my own template. I went in looking for a set of templates, what I came out with was something substantially more profound from my perspective.
One of the templates that I found particularly interesting was the Five Point/Unity template from Toolbox Creations. I am somewhat partial to the darker templates as they make the graphics stand out more. The Five Point/Unity template was very well written and has a lot of features that I love. There were of course some things that I wanted to change such as column width and a few other things. I ended up tearing into the template files and making changes for another project that I am on the hook for. As I began looking under the covers of this template I found something that completely floored me. The header on the site I naturally assumed was a graphic since it contained a font face I had never seen before. Looking closer at it though I realized that I could highlight the font as though it were text! I have long lamented at the fact that web designers are at the mercy of the end user when it comes to look and feel for their sites. If a user refuses to allow JavaScript or if they do not have a font installed within their system, the web designer cannot possibly guarantee what the page would look like. In a print world that would be equivalent to requiring each reader to own the typeface of the magazine. If they didn’t have that font then the layout of the magazine would change to reflect the type that they did have. What a disaster. Here though was a template that was using a font that was non-existent in my system yet was displaying correctly regardless of what computer I was on. This was something I definitely had to know more about.
I began reviewing the configuration files and ran across an acronym I was unfamiliar with; sIFR. sIFR is a typography method for the web which will allow the embedding of font technology onto the page using a form of Flash. sIFR is short for Scalable Inman Flash Replacement. A full description of this process can be found on Mike Davidson’s blog. I wholeheartedly recommend reading through the specification that Mike and Mark Wubben developed. I would also recommend reading through Mike’s blog as it has some great information. I always love it when I end up travelling down a path on the Internet and find a pot of gold waiting at the end of my journey. With sIFR I will be able to ensure that the font style that I intended is actually what is seen. There are of course some caveats to using sIFR. First, it does require JavaScript and Flash so if your users do not have these pre-requisites then the user experience is not going to be quite as seamless. In that case sIFR will resort to using the styles described in the CSS for the page. That’s not too bad since CSS is what you would be confined to anyway so I look at sIFR as an unexpected bonus. The other issue is that sIFR doesn’t really work on a local development box (or at least on mine) so you may have to change your development and testing procedures to be able to test it fully.
The Five Point/Unity template uses sIFR fonts for its header. The template requires the same font to be used for both the site name and the site description. I have modified the code to allow for different fonts for each of those two fields. I also found a great repository for sIFR pre-defined fonts at FontSmack. sIFR fonts are flash descriptions of the typeface itself so you do need resources to create a font face to be used on the web. Fontsmack has a lot of typefaces so that will help if you don’t have the tools installed on your system to create your own custom fonts. I’ve just begun playing with this technology even though it has been defined for a couple of years. I plan to implement it on a few of my sites over time and I’ll let you know if I run into any issues with the technology.

Leave a Reply

Your email address will not be published. Required fields are marked *