Workaround for @font-face CSS validation error

@font-face is great but apparently CSS level 2.1 gives errors for both eot and ttf

Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in : "DroidSerif-Bold" "DroidSerif-Bold" 

Property src doesn't exist : url(fonts/DroidSerif-Bold.eot) url(fonts/DroidSerif-Bold.eot)

Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in : "DroidSerif-Bold" "DroidSerif-Bold" 

Property src doesn't exist : url(fonts/DroidSerif-Bold.ttf) format("truetype") url(fonts/DroidSerif-Bold.ttf) format("truetype")

This sort of sucks because you can’t put a CSS validated badge.. Can someone please share a way to fix this? if possible..

You should also paste the css portion of that, just to see how you are using it.

Sure! Here it is

@font-face {
    font-family: "DroidSerif-Bold";
    src: url(fonts/DroidSerif-Bold.eot);
}

@font-face {
    font-family: "DroidSerif-Bold";
    src: url(fonts/DroidSerif-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "DroidSerif-Regular";
    src: url(fonts/DroidSerif-Regular.ttf) format("truetype");
}

.nav li{ font-family: "DroidSerif-Bold", serif; }

.title {font-family: "DroidSerif-Bold", serif;}

h4{ font-family: "DroidSerif-Bold", serif; }

How bout a work around or some type of JavaScript hack to use @font-face with Google Chrome?

For Google Chrome convert to .woff

but @font-face seems to work on it without a walkaround

For valid CSS i guess I’ll just validate on CSS3 .

i´m not sure, themeforest uses @font-face and validates on css2

now i see you have twice @font-face declaring same font “DroidSerif-Bold”.... also i´m not sure if that´s a good thing.

why not the same but this way:

Not necessarily CSS , you could just use font replacement (Google Cufon. Cufon is an easy example to set up):

1. Download the cufon-yui.js 2. Convert your .tff font to a .js file (generator on cufon’s website) 3. Source the JS files in your section of your page 4. Add some more JS in the to replace specific CSS elements.

It’s very easy once you know how to set it up.

I’m using @font-face with a .ttf font (Rockwell) on one of my sites and works great in any browser (though I haven’t tested in Opera to be honest)

Why on earth would you want to add a “css-valid” badge? That stands for nothing really, because if you use browser-specific declarations (so only people with firefox see some cool effect), you still won’t validate and that doesn’t mean your CSS is bad.

I think these badges should go in the same drawer with table-based designs…

Just my 3.141592653589793… cents

EDIT : note that Cufon is used only for headings, and not for body text. And oh yeah, it crams your site with lots of elements (one element/word)

EDIT 2 : here’s my CSS code that works on IE, Firefox, Safari, Chrome and perhaps many others too

@font-face {
    font-family: Rockwell;
    src: url('fonts/Rockwell.ttf');
    }

.someclass {font-family:Rockwell, Times New Roman, Times, serif;}

I see it doesn’t validate the font-family either… not like I’d give a $h!7

EDIT : note that Cufon is used only for headings, and not for body text. And oh yeah, it crams your site with lots of <canvas> elements (one element/word)

I believe you can define a new class/id/body element to replace by adding:

to your cufon replace JS in .