4

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?

1
  • 1
    @font-face and CSS3 have nothing whatsoever to do with HTML5. Also, @font-face works in IE6 as it was in the CSS2 spec.
    – Ian Devlin
    Sep 29, 2010 at 18:43

4 Answers 4

5

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.

2
  • 2
    Calibri is available for licensing at ascendercorp.com/font/calibri. Getting a copy bundled with Windows definitely doesn't entitle you to redistribute an embedded copy.
    – bobince
    Sep 15, 2010 at 22:35
  • I used CALIBRI AS A EXAMPLE! :) I guess it's totally normal to have two "locals" (especially for fonts named like "MyFont Bold").
    – fomicz
    Sep 16, 2010 at 0:58
3

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

2

RESOLVED: it supports TTF (not OTF) files.

0

Not an expert on the matter but you could try this tool here.

It might at least help generate an example of what you should have.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.