Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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???

share|improve this question
add comment

3 Answers 3

up vote 13 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
WOFF alone won't actually work on all browsers (guess which one). That's why you need EOTs. –  Lèse majesté Nov 22 '10 at 1:42
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.