using unicode_range to exclude numbers only

Question

I'm using a custom font and loading it through @font-face. The text looks fine, but the numbers look screwy (only on chrome-windows, which is a very well know bug. And yes, I tried using the svg format for chrome, which solved the numbers but screwed the text). I decided to limit my own font to only [a-z][A-Z], and using this generator got this:

unicode-range: U+0041-U+005a, U+0061-U+007a;

And it seems to... not be working. Numbers are still being displayed using the font. How do I find the right range to use\some other solution? I'd love for a general solution, for example if I want to limit future fonts as well.

Thanks in advance!

P.s. While I'm on the subject - I'm assuming there's no way to load the same font twice - using the .svg file for numbers and .otf for text, right? Because if possible that'd be awesome as well.

Answer 1

You can use @font-face rules to specify that a font family name (which is up to you to decide) is mapped to a specific font except for some character range, for which another font is used. This even works for local fonts, e.g. as follows:

<style>
@font-face {
  font-family: foo;
  src: local("Times New Roman");
}
@font-face {
  font-family: foo;
  src: local("Arial");
  unicode-range: U+0030-0039;
}
p { font-family: foo }
</style>
<p>hello 123</p>

On supporting browsers, “hello” appears in Times New Roman (if available) but “123” in Arial (if available); the range U+0030-0039 is the common European digits 0 to 9.

You can use similar techniques for downloadable fonts.

The bad news is that unicode-range is not supported by Firefox or by IE 8 or earlier. They fail differently: for the code above, IE 8 uses Times New Roman, ignoring the latter @font-face rule, whereas current Firefox uses Arial, as if the unicode-range restriction were not there.

Answer 2

Finally, I used a "brute-force" method. Using Font Squirrel's webfont generator I recreated my font files, and using the advanced options > custom subsetting, I completely removed the numbers from the font.

Seems like a terrible solution, but the best I could find.

Answer 3

You have to add another font family like below:

Assuming that your font-face is called Ampersand, you will have to add another font-face for the excluded characters.

div { font-size: 4em; font-family: Ampersand, Helvetica, sans-serif; }