How does programmers.stackexchange.com implement the custom font in its nav menu?

Question

Programmers SE implements the "Whiteboard" font on its top navigation menu.

The text is selectable and works in IE7+, Firefox, Chrome, and Opera. It seems JS-based as there is a slight delay before the text changes to the custom font.

PS: I've marked the first correct answer as the accepted answer.

Answer 1

They appear to be simply using @font-face. No JS is involved as far as I can see. In browsers that don't support @font-face a sans-serif font will be displayed instead.

Answer 2

The white board font is implemented using @Font-Face attribute of CSS2. You can read a general discription of how to implement custom font on your own website from here

Programmers SE implements the "Whiteboard" font is implemented by

@font-face {
  font-family:'WhiteboardRegular';
  src: url('img/house-webfont.eot');
}

You can check this by going into the all.css of the Programmers SE

Answer 3

Use font-family in css and http://www.google.com/webfonts to load fonts on your page.

For example add this to html

<link href='http://fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>

and this in your css:

body {
    font-family: 'Seaweed Script', cursive;
}