I'm not sure how to use web-fonts, to be more clear, could anyone shed some light?
This is what I got so far:
client/script = {"
<head>
@import url(http://fonts.googleapis.com/css?family=Allura);
@import url(http://fonts.googleapis.com/css?family=Coming+Soon);
</head>
<style>
.signature {font-family: 'Allura', cursive;}
.crayon {font-family: 'Coming Soon', cursive;}
</style>"}
http://www.html5rocks.com/en/tutorials/webfonts/quick/
You can probably use browse_rsc() to send the font to the browser, instead of hosting it on the web, but I'm not 100% sure if that'll work.
Also, it looks like you'll have to convert your font to EOT format to use it with IE7. The article above recommends Font Squirrel for converting it.
Once you've got your font in the user's browser cache, you just have to use some CSS3 to take advantage of it:
{"
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'MyAwesomeFont';
src: url('MyAwesomeFont.EOT');
}
h1 { font-family: 'MyAwesomeFont', serif; }
</style>
</head>
<body>
<h1>This text is in MyAwesomeFont!</h1>
</body>
</html>
"}
No JavaScript required, unless you see a "Flash of Unstyled Text", which you shouldn't if you use browse_rsc(). The article covers this too.
<edit>
This article suggests that you might need to use a hack to support IE6-8. Might be worth trying:
{"
@font-face {
font-family: 'MyAwesomeFont';
src: url('MyAwesomeFont.eot'); /* IE9 Compat Modes */
src: url('MyAwesomeFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}
"}