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

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.