New Fonts – Fun with Web Typography

“He who dies with the most fonts wins.” Anon

Some people collect cars, others old books or little china dolls. I collect Fonts – and love them all dearly. In any graphic design project one of the joys is selecting one or two that instantly grab the eye, and convey the right message. As I moved more into web design from print graphics much of the collection remained unused, until very recently only a select and limited number of ‘system’ fonts – those guaranteed to be present on all computers – could be used. Frustrating for designers and limiting a rich web experience for users.

That has thankfully all changed, and I bless the Gods coders pray to. A new CSS rule – mainly for HTML 5 compatible browsers – will allow font designers to ‘license’ their designs as commercial or creative commons. The CSS @font-face rule allows for embedding of any font right into the web design, opening up a whole new, fun world of screen based web typography.

Excerpt From CNET: In addition to new features such as support for HTML 5, geo-location, and a noticeably faster engine, Firefox 3.5 added a new CSS rule that makes Web typography much more attractive.
@font-face is a CSS rule that allows Web designers to reference fonts not installed on end-user machines. Just as you would have a pointer to a server-based stylesheet or JavaScript file in your Web page code, you can now make reference to a hosted typeface.
You’ll note that news sites such as CNET News and NYTimes.com are optimized to make Web type more readable and as stylish as possible, but there are many design possibilities via additional downloadable typefaces. (As with any linked asset, there is some level of security risk if a hacker gets their hands on the font file.)
Mozilla’s John Daggett explains: Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.
This function is something I would have expected to be commonplace by now (Safari began supporting it in Version 3.1 and Opera in Version 10) but neither have the market share to drive usage the way Firefox and Internet Explorer do. (Note: this function doesn’t work in IE.)

Just to reiterate that final point – the @font-face CSS rule will not work on any Internet Explorer Browser, even in IE8. If you wish to experience websites that utilize the @font-face possibilities drop IE and run to Firefox, Chrome or Safari.

So now my collection of fonts gets a brand new life, and I am excited. There is a joy in browsing the web (and other designer friends hard drives) for unique fonts. Below are 5 downloaded today, with great thanks to Web Design Booth

These are all free downloadable fonts, for Windows and Mac. Just click on the picture to access the Dafont.com free fonts section.

Acid Label

Acid Label

Broken Ghost

Broken Ghost

Capture It

Capture It

Got Heroin

Got Heroin

VTKS Good Luck for You

VTKS Good Luck for You


Share

Discussion3 Comments

Leave a Reply


*