My wife and I recently moved to Nagoya, Japan and we decided to write a blog to chronicle our experiences. I threw one together using Joomla! and, though I'm a developer and know better than to attempt any real design, I'm not entirely without a sense of style.

I decided that I would use an extension I developed to implement a couple of font faces in the hopes that it would spruce things up a bit. The results were interesting: the blog went from being boxy and ho-hum to having a modern Asian vibe and all I did was use two fonts that are not, "web safe." In this article I'll cover what web safe is, what the alternatives are, why my decision not to use safe fonts is just fine, and what options there are for implementing pretty font faces in Joomla.

What Exactly is Web Safe?

Web safe is a category of fonts that is thought to be installed on all computers. When a browser loads a site, it commonly uses fonts that are on the computer viewing the site in order to display the text. Different operating systems (Windows, Mac, Linux) have different available fonts and web safe is the common intersection among their installed fonts. Some examples of web safe fonts include: Verdana, Arial, Times, and Georgia. If a website requests a font that a computer doesn't have it defaults to the browser's choice of styling, ruining the design. The concept of web safe fonts has locked designers into working around a handful of fonts.

The Alternatives

The Internet being as important a communication medium as it is, this situation couldn't last, and a few years ago alternatives to web safe fonts started to spring up.

The first mainstream alternative was sIFR, which uses a combination of javascript and Adobe Flash to replace text on the fly with fonts that are embedded into a flash file. sIFR was an enormous step forward, however it isn't perfect: pages load slower with this technique and Flash has to be installed in the browser (something certain popular smart phones don't use.)

After sIFR came Cufón, which uses javascript and the scalable vector graphics and no Flash, so it has broader device support. Cufón is quicker than sIFR, but has a drawback in that it still takes a javascript engine to work and that the speed of that engine will determine how quickly the font will display. On browsers running slowly, this leads to F.O.U.T., or Flash of Un-Styled Text. Additionally, Cufón allowed for using un-encrypted fonts which violates the license of most commercial fonts.

The most recent solution is to use the CSS @font-face rule. This is the way that it should have always been and all that this technique uses is the built in capabilities of your browser. Why wasn't it like this from the start? Popular browsers, as a whole, hadn't yet developed this functionality. Additionally, no one had figured out a consistent way to incorporate font face rules into a stylesheet in a manner that all browsers could understand (each having a different implementation.) Thankfully, both of these hurdles have been hopped by some very smart people and the web is starting to pop with pretty fonts.

Is My Decision To Use Pretty Fonts Risky?

No, all modern browsers support the technique I am using (@font-face) and most of them have supported it for several major versions. Additionally, you can always set fall-back fonts in your CSS and because of this there isn't a good reason not to improve your site design with sharper looking fonts.

Very Cool. How Can We Do This With Joomla?

The first option for using pretty fonts is to use a template that bakes them in. Shape5, JoomlArt, YooTheme, Joomla Bamboo, and Rocket Theme templates often come with Google Web Fonts available for use (a font delivery service that uses @font-face rules.)

The other option for implementing pretty fonts is to use an extension. In the Joomla Extension Directory, for Joomla 2.5, there are several plugins and components that make using pretty fonts possible. I'm not going to list them here, but many use Cufón, @font-face, and/or font delivery services. To see these, you can browse the typography category.

The advantage of using a template over using an extension is that you only need to install and manage one item: the template. The advantage to using an extension over a template is that you are not tied to that particular template or limited to what font implementation it offers. The only font delivery service that I've seen integrated in templates is Google Web Fonts and there are several others with thousands more fonts. Additionally, templates typically only allow for setting font faces for pre-designated elements (though this is actually a benefit for users less familiar with web design who don't understand CSS.)

The Future is Now

I've skinned many custom templates and have disappointed as many designers by telling them that we needed to use a web safe font instead of what they had originally envisioned. However, that era has faded behind us with technology advancing far beyond our previous limitations; pretty fonts are no longer a risk and we can reliably use them. In the Joomla community, we're fortunate to have many choices in both templates and extensions for easily employing them and I encourage you to take advantage of this and browse the typography category of the JED or check out what your favorite template provider is offering.