Pixelastic

As a security reason, Firefox do not allow an @font-face rule to load fonts hosted on a different domain (even a subdomain).

I don't exactly understand why, I guess it has something to do with preventing crosslinking and copyright violation. I think we should keep the website author handle all this stuff and not required the browser to make assumptions like that.

Anyway, I recently tried to move my CSS file to a subdomain, to reduce pages loading times. Doing so I saw that my fonts did not correctly load on Firefox.

After some digging, I found that I had to manually allow them to be linked from an other domain, server-side. Here is the little snippet I added to my .htaccess

<FilesMatch "\.(ttf|otf|woff)$">
	<IfModule mod_headers.c>
		Header set Access-Control-Allow-Origin "*"
	</IfModule>
</FilesMatch>

The .woff font extension is the standard-to-go in terms of font embedding on the web.

You should add them first in the order of fonts you're loading, before the .ttf/.otf ones.

@font-face {
	font-family: "Unibody8SmallCaps Regular";
	src: url('fonts/unibody_8-smallcaps-webfont.woff') format('woff'), url('fonts/unibody_8-smallcaps-webfont.ttf') format('truetype');
}

The interesting thing to note is that you cannot omit the quotes around the format('woff')/format('truetype') part. Otherwise the font won't be recognized (at least by FF3.6).

CSSTidy seems to have a bug when there are multiple format() declarations in a rule, it removes quotes in each of them except the last one, thus making the whole rule unparsable by the browser.

So I started, again, to dig into the CSSTidy code and see what I could do about that.

I updated the csstidy.php file at around line 847 and changed the if statement 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 = '';
}

This way all sub values of the src: rule will be correctly parsed, and not only the last one.

Ah elles en ont du caractère ces polices ! Elle m'en font voir de toutes les couleurs...

Pour l'intégration sur laquelle je travaille, certains titres utilisent une police spéciale, et pour intégrer ça grâce ) @font-face et Cufon, il me faut les fichiers de police sous différents formats.

La graphiste m'a fournie la police, sous format .dfont (package de plusieurs font à la sauce Mac). J'ai pu extraire le package grâce à DFontSplitter, ce qui m'a donné plein de polices .ttf.

Corrompues, d'ailleurs, qu'il m'a fallu réparer grâce à CrossFont (attention shareware de 15 jours). Sauf qu'il me convertit les fichiers en .otf.

Pas de soucis pour Firefox, Safari et Opera qui comprennent ce format très bien, mais pour IE, je dois convertir ça en .eot (grâce ce converter en ligne).

Qui ne prends malheureusement que des .ttf comme source... Impossible de trouver un converter otf => ttf sous windows qui ne demande pas d'installer des tas de choses, je suis donc passé sous mon Ubuntu, ai téléchargé FontForge : Open => Generate Font => ttf et voila

Edit : Et hop, un autre converter en ligne de plus (otf, ttf, dfont)