Start using awesome custom web fonts today!

A quick recap

Several older embedding options exist that have been around for awhile. Scalable Inman Flash Replacement (sIFR) which requires the Flash plugin and is thus in my opinion less desirable option, is one of them. There are also server side font replacement implementations where graphics are generated and then served to the web browser, but again this requires multiple technologies to work and has many limitations.

Cufón, a Javascript solution

A more recent technology advance in fonts is Cufón. Cufón requires no flash install and no extra software on the server side. It’s a pure JavaScript implementation and converts fonts into inline graphics. To a screen reader or web crawler the text looks like plain HTML text as you apply Cufón to the HTML text elements you wish to replace. This is one of the best font implementations yet, but it still has several limitations and caveats.

1. You cannot select or copy any of the text that has been replaced with Cufón. This is minor, but still a usability issue since the user expects to be able to copy and paste text if they want.
2. You cannot user your browsers page search for Cufón replaced text.
3. Cufón does not support rollovers, so you cannot apply a hover to your links. This is a little more of a deal breaker since many navigation toolbars require rollovers.
4. It is illegal to embed many fonts with Cufón since you are distributing the actual font data in a javascript file. This is not an issue with Flash since the actual font data is not being distributed. Cufón can encrypt the font data, but you will still be in violation of many font license agreements.
5. Knowing which fonts you can legally embed is a bit of a nightmare since the legal jargon on many font foundries will just leave you confused.
6. You must upload your fonts to the Cufón site and generate a JavaScript version of your font. This is time consuming and one extra step.

Welcome to Google web fonts

Google web fonts solves five of the six issues listed above.

1. You can select and copy / paste any of the fonts.
2. You can search for the fonts with your browsers page search.
3. Hover link rollovers are fully supported.
4. All of the fonts in Google web fonts are free to use and eliminate the research or guesswork needed.
5. Once you choose the font you would like all you have to do is copy and paste the generated code into your HTML document.

The fonts are CSS based, and the concept of CSS linked fonts has been around since 1998, but it hasn’t been until recently that you could guarantee most users would have browsers that could see these linked fonts.

Why Google Fonts? It’s fast and super easy!

Go to Google web fonts and browse the many fonts until you find one you like. Select it and launch the Google font previewer, here you can tweak the font and even add CSS text shadows. At the bottom of your previewer you will see a CSS snippet. Copy that and past it into your style sheet and you’re done, all your fonts will be like the one in the previewer.

Of course you probably don’t want to apply it to your entire site. In the case above it would probably be best to apply the style only to HTML header tags, so you could change the body tag to h1 or even use a class. For the example below I just created a google class.

Josefin Sans is just one of the many great fonts available at Google web fonts.

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,100italic,300,300italic,400,400italic,600,600italic,700,700italic" rel="stylesheet" type="text/css" />
<style type="text/css">
.google {
     font-family: 'Josefin Sans', serif;
     font-size: 36px;
     font-style: normal;
     font-weight: 400;
     text-shadow: none;
     text-decoration: none;
     text-transform: none;
     letter-spacing: 0em;
     word-spacing: 0em;
     line-height: 1.2;
}
</style>

And that’s about all there is to using Google fonts, it’s quick and easy.

What platforms does Google fonts support?

Going forward pretty much everything is going to support CSS based fonts, but here are the versions that support Googles method.

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

Can I download them and use them in a graphic applications like Photoshop?

Yes, while you don’t need to actually download them in order to use them on a website, you can download all of the Google Web Fonts if you like and use them in your favourite graphics package.

@font-face; another great method for using custom fonts

You can use download Google web fonts, The League of Movable Type fonts, or any web licensed fonts and use the @font-face method. In fact this is a very viable method now that most browsers support. OTF fonts will be supported in all the browsers that Google Web fonts are supported in, and in some cases all the way back to IE4. The only real difference with Google Web fonts is the ease of use and convenient library, but feel free to download any fonts you want and use this method if you prefer. @font-face also has all the same benefits that were listed for Google web fonts.

How to use @font-face

Using css linked fonts is pretty easy and has been around since 1998. Today most browsers support them, so go nuts. First download a the font you like, it must be web licensed so grab one from Google web fonts or The League of Movable Type. Once you have done that you will need to upload the actual font to your web server.

ORBITRON A high impact font with four 4 styles from The League of Movable Type.

ORBITRON black.

ORBITRON bold.

ORBITRON medium.

ORBITRON light.

The CSS for above example although long is quite simple. @font-face declares your font-family name and src (source) path to where the font is located on your server. Once they are set up you can start creating css classes or styling any HTML elements as you normally would. The example above is shown below.

@font-face {
     font-family: "Orbitron-Black";
     src: url("PATH_TO_FONT/orbitron-black.otf");
}
@font-face {
     font-family: "Orbitron-Bold";
     src: url("PATH_TO_FONT/orbitron-bold.otf");
}
@font-face {
     font-family: "Orbitron-Medium";
     src: url("PATH_TO_FONT/orbitron-medium.otf");
}
@font-face {
     font-family: "Orbitron-Light";
     src: url("PATH_TO_FONT/orbitron-light.otf");
}
.orbitron-black {
     font-family: "Orbitron-Black", serif;
     font-size:18px;
}
.orbitron-bold {
     font-family: "Orbitron-Bold", serif;
     font-size:18px;
}
.orbitron-medium {
     font-family: "Orbitron-Medium", serif;
     font-size:18px;
}
.orbitron-light {
     font-family: "Orbitron-light", serif;
     font-size:18px;
}

Other options for web licensed fonts

TypeKit is one of the commercial options with yearly pricing options and a limited free option. You can find commercial fonts here, but unfortunately a lot of the big names are missing. A quick search for favourites like Gotham, Helvetica Neue and Frutiger yielded nothing, so for now I’ll be sticking with Google web fonts and The League of Movable Type.

The future is digital

It’s quite annoying that the large font foundries have locked down and prohibited the use of their fonts on the web or only allowed clunky implementations. It’s as if they believe that if they were to open up their licenses that the world would cease to buy fonts tomorrow. I think it would be quite the opposite. Individual sites that want to embed fonts regardless of whether they own the rights to them or the licensing restrictions are going to use them. Larger corporate sites and individual sites that respect the copyright of fonts will instead move to the quickly growing library of web licensed and free fonts. The future is digital, and the larger foundries really need to wake up before people just move elsewhere for their fonts.

Tonight I played Space Monkey for the first time for about 30 minutes and I must say this is a really fun iPhone game. It’s a unique take on the puzzle genre and the graphics are good, the sound is great, and right now the price can’t be beat, it’s free for a limited time. Get Space Monkey right now while you can and check out the screenshots below (Spoiler, I show one of the bosses).

There are a lot of options out there when it comes to transferring your files. There are free solutions, paid solutions, and solutions that require hacking or jailbreaking the device. Some of the methods only work on certain firmware versions, and some of the paid transfer applications have limitations on the shareware versions. After much digging around and several failed attempts I finally found a program that will work on the newest iTouch firmware as of this writing and I also quickly tested it out on my iPhone. It’s called SharePod, a really polished little app that is completely free. This nifty little program recognized the iTouch in seconds and allowed me to copy all the mp3s on the device over to the laptop. I did have problems with some video files, but that may have been my mistake, I’m not sure, but I recommend testing out your files after copying them off your device onto a new computer before resyncing your iPod.

Basically SharePod lists all the albums you have and lets you select each file you want or all of them. The great thing about SharePod is that it seems to be updated on a regular basis to support the new releases. When testing it out on my iPhone it did say not all features were currently supported on my version of the phone, but I could still transfer files from the iPhone to my computer, which is really all I need. It’s nice to know that the developer is keeping this app up to date and I really hope they continue to do so.

So if you have a massive collection to transfer over to a new computer, or even just a few songs, try out SharePod, it’s the best solution I have found for something that I think should be basic functionality built into iTunes. You can see screenshots of this great little app on the SharePod site too.

This theme also uses Alex King’s popularity contest plugin. You can see it in the screenshot below on the sidebar; it tracks your most popular posts and displays them on the front page. You do not need to add this plugin to use the theme as there is a function check in the theme that will omit that section if you do not have the plugin activated.

If you like it, flip me an email so I can see how you have used it.

Download WordPress theme and PSD file.