Using custom font with CSS3 / HTML5?

Question

I have this code at the beginning of my CSS stylesheet (related 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 use:

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

But that still doesn't work. What is wrong with my code?

Answer 1

RESOLVED: it supports TTF files (not OTF).

Answer 2

Your local("Calibri") repeated twice in the src property.

Also, keep in mind that IE does not support local() , so if you browse your site in IE, it does not load the font. In addition, IE, as far as I know, supports only the EOT format.

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

One more thing: if it's a Microsoft Calibri font, keep in mind that a license cannot permit this type of use. I am not familiar with the license, so I can’t say for sure if this is so.

Answer 3

In general, the accepted code for use at the moment is as follows:

 @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 emoticon for local is that you cannot be sure that the user's local file is the one you intend to (read the page for details, this is an interesting read.)

Answer 4

Not an expert on this, but you can try this tool here .

Perhaps this will help create an example of what you should have.