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.

score 9 · Answer 1 · answered May 19 '14 at 16:58

9

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.

answered May 19 '14 at 16:58

Jukka K. Korpela

195,524
37
270
390

But I already know all that, I just couldn't get it to work. Are you saying that instead of excluding the numbers I should add another font specifically *for* them and that should do it? (also, FF and IE8 support don't matter to me. FF doesn't have a problem with rendering fonts like chrome does, and IE8 can go screw itself) – yuvi May 20 '14 at 06:22
1

I’m saying that you can get digits from another font this way. I cannot tell why it did not work for you, since there is not enough information about what you actually did. In any case, this positive approach (specify what you want from another font) is simpler than trying to exclude something from a font (and might work more reliably; the odds of meeting browser bugs are bigger with more complicated code). – Jukka K. Korpela May 20 '14 at 06:43
Did you ever succeeded and came up with a solid solution for this? – Colonize.bat Aug 08 '15 at 00:41

score 1 · Answer 2 · answered May 19 '14 at 13:56

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.

using unicode_range to exclude numbers only

2 Answers2

Linked