Search code examples
cssfont-face

Please correct my @font-face CSS


I am practically wetting myself at the prospect of getting this working!

I have set the location of the .ttf file - but it doesn't seem to pick it up.

Am I setting the location up wrong?

Am I describing the font incorrectly?

<!DOCTYPE html>
<html>
<body>

<style>

@font-face
{
font-family: Baskerville;
src: local('J:\Internet\Paul\Baskerville test\IT597___.ttf');
}
p { font-family: baskerville, serif; }
</style>

<h1 class="baskerville">This is written in ITC Baskerville</h1>

<p>Please note, that this is not written in Baskerville, but the word <span class="baskerville">Waterman</span> here is.</p>


<p><a href="http://www.w3.org/TR/css3-fonts/#font-face-rule" target="blank">Read this</a> for the W3C specifications on the "@font face" declaration which I've used to do this.</p>
</body>
</html>

Solution

  • http://www.fontsquirrel.com/tools/webfont-generator use this generator to generate your font face. it will also provide the right css for the font.

    one of the mistakes I see in your code is that your font-family is defined as Baskerville and p has font-familly baskerville (capitalize this)