Hey there,

I think the @font-face definitions are getting stripped out.

Comments

Mac Clemmens’s picture

To provide a little more detail, we're using the @font-face generator on Font Squirrel, and for some reason, CSS tidy removes all of the definition. I know it contains a little hack to make the definition work in IE and other browsers. Can you provide a recommendation, or perhaps a setting to allow the @font-face defs to pass directly through?

philbar’s picture

Status: Active » Needs review

Can you test the following fix?

Modify line 711 of class.csstidy.php to look like this:

if($this->sub_value != '') {
	$this->sub_value_arr[] = $this->sub_value;
	foreach($this->sub_value_arr as &$sub_value) {
		if (substr($sub_value, 0, 6) == 'format') {
			$sub_value = str_replace(array('format(', ')'), array('format("', '")'), $sub_value);
		}
	}
	$this->sub_value = '';
}

Source: http://www.pixelastic.com/blog/86:csstidy-and-the-woff-fonts

Mac Clemmens’s picture

Hey,

Thanks for this code!

It didn't work, unfortunately, but I think we're getting closer.

Here's the CSS that seems to be getting messed up: (It's a special format that works on all the different browsers.)

@font-face {
	font-family: 'League';
	src: url('fonts/league_gothic-webfont.eot');
	src: local('☺'), url('fonts/league_gothic-webfont.woff') format('woff'), url('fonts/league_gothic-webfont.ttf') format('truetype'), url('fonts/league_gothic-webfont.svg#webfontd1flepKb') format('svg');
	font-weight: normal;
	font-style: normal;
}
philbar’s picture

Ok, I'll try to test it this weekend.

philbar’s picture

Status: Needs review » Needs work
philbar’s picture

This issue here appears that src: isn't a registered property with CSSTidy.

By adding the following to the list of properties on line 181 of data.inc.php we get a partial fix

$GLOBALS['csstidy']['all_properties']['src'] = 'CSS3.0';

Running the code, this:

@font-face {
font-family: 'League';
src: url('fonts/league_gothic-webfont.eot');
src: local('☺'), url('fonts/league_gothic-webfont.woff') format('woff'), url('fonts/league_gothic-webfont.ttf') format('truetype'), url('fonts/league_gothic-webfont.svg#webfontd1flepKb') format('svg');
font-weight: normal;
font-style: normal;
}

gets turned into this:

@font-face {
font-family:League;
src:local(☺),url(/themes/garland/fonts/league_gothic-webfont.woff) format(woff),url(/themes/garland/fonts/league_gothic-webfont.ttf) format(truetype),url(/themes/garland/fonts/league_gothic-webfont.svg#webfontd1flepKb) format(svg);
font-weight:400;
font-style:normal
}

So, it overwrites the following code:
src: url('fonts/league_gothic-webfont.eot');

...which I believe means Internet Explorer gets left out of the fun. :-(

philbar’s picture

Status: Needs work » Closed (won't fix)
philbar’s picture

From the project page:

One of the core features of CSSTidy is to remove properties which have been overwritten. Sometimes, like in the case of @font-face, overwriting properties is a technique used for browser compatibility. Unfortunately, since this feature is so engrained in CSSTidy, I'm not able to provide a solution to preserve this technique. This means the first src: property, which declares the Internet Explorer .eot file, is removed from your stylesheet and therefore IE doesn't display your font.

The solution is to keep the @font-face rule out of CSSTidy's processing. You can do this by hard coding it into your theme so it is not visible to Drupal's CSS preprocessor.

philbar’s picture

Status: Closed (won't fix) » Needs work

Going to try getting this to work:
http://www.pixelastic.com/blog/188:css3-gradients-with-csstidy

The cursor hack it refers to no longer exist in CSSTidy, so I'm not sure this will work.

philbar’s picture

Assigned: Unassigned » Mac Clemmens
Status: Closed (fixed) » Fixed
philbar’s picture

Assigned: Mac Clemmens » Unassigned
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.