HTML and CSS Reference
In-Depth Information
Figure 5-7.
Browsers that support unicode-range download only the quotes, not the full font
The problem with using
unicode-range
is that it's not currently supported by Firefox or Opera, so those
two browsers download the entire font rather than the characters you want. However, British web developer
Drew McLellan has devised a crafty technique to prevent Firefox and Opera from downloading the whole font
(
http://24ways.org/2011/unicode-range
). It involves creating a second
@font-face
rule that specifies a local
font as the source of the same
font-family
descriptor like this:
@font-face {
font-family: 'Limelight Quotes';
src: local(Georgia);
unicode-range: U+270C;
}
In the second
@font-face
rule,
unicode-range
specifies an obscure symbol that will never be used in your
page. Firefox and Opera treat the second rule as overriding the first, but other browsers simply add the new
unicode-range
value to the existing one. But because the font is local, there's nothing to download, so the rule is
harmless. Figure
5-8
shows the result in Firefox.
Figure 5-8.
The second @font-face rule prevents Firefox from downloading the web font
