Text-as-images, SIFR, Cufon… Web designers have been clamoring for more than the default set of Georgia, Helvetica, Palatino and Verdana for ages. And oddly enough it was Internet Explorer, the bane of many a web designers existence, that supported importing fonts first (IE 4!). Though, in true Microsoft fashion, IE only supported (and still only supports) a proprietary format.

Firefox and Safari, in their latest versions, support the more common .TTF and .OTF files. Firefox 3.6 will support .WOFF which hopes to be the new standard in web font filetypes. Chrome supports .TTF and .OTF as well, but defaults with them disabled at the moment as the dev team is looking into potential security issues.

So. The majority of the internet has the capability to view embedded fonts. Now what?

Getting your font on

You’ve really only got two options; go with a hosted service like Typekit, or roll-your-own manually using something like the awesome FontSquirrel @font-face generator.

How these services work

Typekit requires that a bit of javascript be inserted into the head of your HTML. That code is then used to pull in the font files that are in your “kit”. Using the web interface you can sort through fonts, add the fonts you like to your kit, assign them to elements, id’s or classes, and hit publish. That’s it.

The FontSquirrel generator doesn’t require any javascript. Simply upload the font that you would like to use to the generator, check off the types of files you’d like it to make, choose to eliminate any extraneous glyphs, and hit generate. A ZIP file with a HTML example page, CSS file withbulletproof @font-face syntax and all the converted font files is then served up. Drop the generated CSS into your stylesheet, specify your new font on some elements and save it. Upload the CSS along with the font files and you’re done.

My preference is the roll-your-own method. First of all, it’s free. Second, the FontSquirrel generator lets you select what kinds of glyphs you want to be included in your font file. Why would you want to do that? To reduce file size. Unless, of course, you really need all those accented vowels. Third, you don’t need to go to or rely on another site to manage and host your fonts.

Both options are good choices. And damn, does it feels good to finally have choices.

Where to start

I’ve been struggling through the process of re-designing my own site for quite some time now. I know it sounds strange. I can spend all the time I want, incorporate anything I desire, and have it look any way I could possibly imagine. How can I go wrong with that?!

Therein was the problem: unlimited possibility.

Examples of the issue

Pretend for a moment that you’re a talented movie producer and you’ve got an unlimited budget, a flexible schedule and all the greatest actors begging to work for you. With so much talent and potential handed to you, you might think that you’ve got a successful movie pretty much in the bag already. On the other hand, you could come up with a movie like Spiderman 3 or Pearl Harbor.

Ok, erase all that. You’re still a talented movie producer, but you’ve got almost no budget, a short timetable and one great actor. With more constraints, you’ve gotta get creative. A great movie doesn’t sound so easy all of a sudden. Primer was a very good movie made for $7,000 but some more famous examples would be the first Rocky movie, Mad Max or even The Blair Witch Project.

First steps

I soon realized that without constraints, there was no way I was ever going to get anything done. So I went about setting some up.

Identify your priorities

What do you want to have on your site? Is it going to be for work and business relations or is it for your Russian nesting doll collection? The more specific and detailed your priorities list is, the quicker you can get to finding a solution. Remember that this isn’t cast in stone. You can add features at a later date. We’re primarily interested in getting the ball rolling here.

Identify your assets

This is more about identifying what you’ve currently got in terms of media and content than it is about future planning. Again, you’re taking stock of what you got now. Leave provisions for future additions, but don’t let them stop you from getting things started.

Set a time limit

Time limits keep you from pursuing too many wild ideas and gives you a deadline to shoot for. Be reasonable with your deadline. I try to define mine in hours rather than a date in the future.

Incorporate something new

Try to incorporate one new technology, language, or principle. But only one thing. Focusing on learning one new thing will keep you focused on that task. Also, if you’ve set a time limit for yourself, you won’t have time to immerse yourself in multiple new ideas.

How I attained my goals

I’ve got a blog (which you’re reading), a twitter account and a flickr account that I wanted tied into one page that would be a sort of summary for my online presence. I knew I was going to be utilizing the RSS feeds from each of these sites, so I researched and found a PHP solution called SimplePie that allowed me to import my RSS feeds. I then gave myself two hours to sketch, mock up, and prepare the layout and another hour for the CSS. The SimplePie setup went a lot smoother than I anticipated and in no time, I had a site up and running.

Did it look exactly the way I wanted it to? No. But it was about 90% of the way there which is about 75% closer than it has ever been in the past. By giving myself some guidelines and a target, I was able to get something done.

Design Fckr
Not necessarily updated that often, but provides a good mix of Advertising, Illustration, and Graphic Design.

Monoscope
More artwork than Advertising or Design. Updated fairly frequently.

Flickr
Anything you want. Book covers to murals to brochures. Not always the best quality, but you never know until you look.

This is by no means the be-all-end-all of lists. I’d be interested to see where other people find their inspiration. Bonus butt-kissing points if you say my blog!