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\         


        

Answer 1

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.)