What font technique is being used here?

Question

While I was attending this event (http://worldtour.fogcreek.com/) I noticed this page had custom fonts for the Address part in the top left corner (i.e "Fog Creek Software 55 Broadway Fl 55....") When I looked at the source code I couldn't really determine what they were doing but it satisfied these conditions:

1. Works well with IE 7,8 (and all other browsers)
2. Allows you to use any font you want
3. Is text base, i.e no flash, images, etc. Thus it is better for SEO and indexing and such.

So what technique are they using here???

Answer 1

They are using the @font-face technique. By using a variety of files and some pseudo browser detection they are able to serve font's consistently in all browsers. The use:

• True Type and WOFF for Webkit, Gecko, and Opera
• EOT for Internet Explorer
• SVG for iOS

Because of the way the CSS is structured, it will check to see if the font is avilable locally, if it's not and it's IE, it will use the EOT and not load anything else. And if it's not IE it will load the font it will need.

Check out Font Squirrel for more info and @font-face kit's and a generator of @font-face fonts and CSS.

They are also using text-shadow with a color close to that of the text. This creates the blurred effect on the text.

Answer 2

This website uses a font technique called WOFF (World Open Font Format). It is currently being standardized on a recommendation by W3C. It enables fonts to be directly embedded in web pages.

http://en.wikipedia.org/wiki/Web_Open_Font_Format

Have a read. Seems to be a very interesting concept and is beginning to become widely accepted even though it was on drafted last year.

Answer 3

Also check out Google's font directory which is a great way to get started using fonts that aren't considered "web safe." Basically, all you have to do is add a link tag the proper font in the directory before the css that uses it. Google will determine the browser through the user agent, and will spit out the required font-face css. You can then use the font in the "font-family" property.

Here's the quick start guide: http://code.google.com/apis/webfonts/docs/getting_started.html