How to use this CSS font technique?

Question

The header in mozilla lab's Bespin anouncement has a very nice antialized font put there with css (which is not a standard font). Anyone knows how did they do it?

Bespin Embedded 0.6 released! Now in two great flavors.

http://mozillalabs.com/bespin/2010/01/15/bespin-embedded-0-6-released-now-in-two-great-flavors/

Answer 1

They're using the @font-face directive.

@font-face {
    font-family: "MuseoSans";
    src: url(fonts/MuseoSans_500.otf) format("opentype");
}

Then you can simply use the font-family as you would in any other css rule. This is only supported by a few browsers, since it is CSS3.

ALA has a great article regarding CSS3 and font-face here.

Answer 2

Try reading up on font-face and then head over to FontSquirrel.

Answer 3

If you see at the css source code they define a new font-face with an external font-file

@font-face {
    font-family: "MuseoSans";
    src: url(fonts/MuseoSans_500.otf) format("opentype");
}

and then use the newly defined family in the css..