Using a custom font with CSS3/HTML5?

Question

I have this code in the beginning of my CSS stylesheet (linked to my index.html, of course):

@font-face {
    font-family: "Calibri";
    src: local("Calibri"), local("Calibri"), url("fonts/Calibri-Bold.otf") format("truetype");
}

And i'm using:

#id {
font-family: Calibri, Verdana, Arial, sans-serif;
}

But it still doesn't work. What's wrong with my code?

Answer 1

You have local("Calibri") repeated twice in your src property.

Also, keep in mind that IE does not support local() so if you are viewing your site in IE, it won't load the font. On top of that, IE, to my knowledge, only supports the EOT format.

For an OTF font, use format("opentype") (you have "truetype").

One more thing: If this is Microsoft's Calibri font, keep in mind that the license may not permit this type of use. I'm not familiar with the license so can't say for sure if this is the case.

Answer 2

In general, the accepted code to use at the moment is this:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

as suggested by Paul Irish: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

The smiley for local is because you can't be sure the user's local file is the one you intend to be (read the page for the details, it's an interesting read.)