2

In some html documents I'm using webfonts for only a couple of words. Performance-wise loading a complete font-file seems wasteful. This is where the unicode-range parameter of the @font-face declaration comes in:

http://www.w3.org/TR/css3-fonts/#unicode-range-desc

With it I supposedly can define what characters of the font-file to load, thus improving performance greatly. But I just can't get it to work. And the odd thing is that it diplays all the characters in firefox, and it fails to load the font in safari just if I include the unicode-range parameter in my declaration. Any help would be appreciated, below is the html I was testing it with:

<!doctype html>
<html lang="en">
<head>
<style text="text/css">
@font-face {
font-family: 'dream';
src: url(Fonts/Digital-dream/DIGITALDREAM.ttf) format("truetype");
unicode-range: U+FF21;
}

*{
font-family:dream;
font-weight:normal;
}
</style>
</head>
<body>
<p>ASDWEWQDSCF</p>
</body>
</html>
hippietrail
  • 15,848
  • 18
  • 99
  • 158
  • try generating a cross-browser @font-face kit via fontsquirrel.com and then apply the unicode range property. – albert Oct 20 '11 at 20:49
  • I prefer to understand the font-face declaration rather than using something that's generated... –  Oct 20 '11 at 20:53
  • my understanding of @fontface has tripled from viewing the source kits. source code is the best documentation ever. but you get a point for a snide remark. you're using the lowercase HTML5 doctype, clearly you don't care about understanding elements before you use them – albert Oct 20 '11 at 23:44

1 Answers1

8

You are misunderstanding the purpose of that value. From that page:

This descriptor defines the range of Unicode characters supported by a given font

So this isn't the glyphs (or characters) to download, this is actually telling the browser what characters are in the font so that the browser can determine if its even worth downloading the font in the first place. If the text being styled isn't in the given unicode-range then the font won't be downloaded.

Example XIII on the page you reference shows a great example. Imagine 3 @font-face rules that share the same font-family attribute. The first rule, however, points to a giant 4.5MB TTF file that has every possible glyph needed. The second rule lists a much smaller 1.2MB TTF but says to only use it only if all of the characters fit into the Japanese glyph range. The third rule lists a very small 190KB file that can be download if the text being styling is only roman.

Chris Haas
  • 53,986
  • 12
  • 141
  • 274
  • Right. Thanks for that! Do you by any chance how I could achieve what I wanted from unicode-range? –  Oct 20 '11 at 20:47
  • The solution would be to create multiple versions of your font `DIGITALDREAM.ttf`. (You'll need to find a font-editor on your own but there's many out there.) One version might just contain upper and lowercase `A-Z`, digits and punctuation. This file will probably be pretty small. A second version might be the same as the first but also include accented characters. The third version might just be the giant raw TTF file. Follow example XIII on your link for how to set things up. Also remember that `unicode-range` is CSS3 so browser support might not be there yet. – Chris Haas Oct 20 '11 at 20:55
  • Thanks Chris! I'll probably just resize the font files. –  Oct 20 '11 at 21:23
  • Hm. The problem is that the font I'm using is licensed so that I can't really modify it. I'd have to either modify it on the fly or use javascript somehow to extract what I'm looking for. I suppose that's a bit complex right? –  Oct 20 '11 at 21:33
  • Ultimately your license will dictate what you are allowed to do. If you use JavaScript to do anything, however, you'll first have to download the entire font so I don't think that will help. I'd make sure that GZip compression is turned on on the server and enabled for your font files and cache the heck out of them on the client side. – Chris Haas Oct 20 '11 at 22:03