Workaround for @font-face CSS validation error


#1

@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…


#2

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


#3

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; }

#4

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


#5

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.


#6

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:

@font-face { font-family: 'DroidSerif-Regular'; src: url('DroidSerif-Regular.eot'); src: local('DroidSerif-Regular'), url('DroidSerif-Regular.ttf') format('truetype'), }

#7

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.


#8

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 <canvas> elements (one element/word) :expressionless:

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


#9
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:

Cufon.replace (‘body’);

to your cufon replace JS in <head>.


#10

Nobody cares about the “Valid CSS” badge. As long as you know what why you’re doing it…don’t worry about fully passing the validation. :slight_smile:


#11
Nobody cares about the "Valid CSS" badge. As long as you know what why you're doing it...don't worry about fully passing the validation. :)

+1 :slight_smile:


#12

There is a solution

° First

go to: http://jigsaw.w3.org/css-validator/

° Second

enter the URI of a document

° Third !important

change setting for profile (More Option)

from CSS level 2.1 to CSS level 3

° Forth

after your document is validate scroll down the page to place where you find this section:

“If you would like to create a link to this page (i.e., this validation result) to make it easier

to re-validate this page in the future or to allow others to validate your page, the URI is:”

° Fifth

copy first URL and replace the original URL:

a href="You URL"

img style="border:0;width:88px;height:31px"

src="http://jigsaw.w3.org/css-validator/images/vcss-blue"

alt=“Valid CSS 3!”

If anyone click on your CSS validation button will see your validation result for CSS 3

:wink: