Set a font specifically for all numbers on the page

Question

For my webpage, I chose a font that works well for all the letters. However, for all numbers I'd like to use a different font.

Is there a way that I can set a CSS rule to target all the numbers on the page?

If I can't do it strictly with CSS, my first thought is to use regular expressions to surround all numbers with a span with a "numbers" class and apply a font for that class. Is there a better way to do this?

Merino

I don't know if this will be useful, but have a look at it. johndoesdesign.com/blog/2012/jquery/… – Toadfish

You can do it with JavaScript as you've described, or you can create a custom font by replacing the number glyphs in your "letters" font with the number glyphs in your "numbers" font. – Depilatory

Answer 1

You can do it in JavaScript relatively simply by traversing the document so that you wrap any sequence of digits in a span element with a class attribute and declare font-family for it in CSS.

It’s possible in principle in pure CSS, too, though only WebKit browsers currently support this:

@font-face {
  font-family: myArial;
  src: local("Courier New");
  unicode-range: U+30-39;
}
@font-face {
  font-family: myArial;
  src: local("Arial");
  unicode-range: U+0-2f, U+40-10FFFF;
}
body { font-family: myArial; }

Finally, and most importantly, don’t do it. If you are dissatisfied with digits in a font, don’t use that font.

Thermistor

I checked out the CSS3 Font spec on unicode-range...interesting. – Rochet

This is good solution. Can you help me how can I use like that: @font-face{ font-family: myArial; src: local("Times New Roman", Times, serif); unicode-range: U+30-39; } – Alverta

Answer 2

Surrounding your numbers with a <span class="number"> sounds like a good, semantically sound approach.

In fact, CSS3 doesn't offer an alternative, and I don't see anything forthcoming in CSS4. If you look at the latest CSS3 recommendation, it doesn't specify any content selector, but the old 2001 candidate recommendation was the last version to provide the :contains() pseudoclass.

This would let you match an element that contained numbers:

/* Deprecated CSS3 */
p:contains(0), p:contains("1"), p:contains("2") {
    background-color: red;
}

Even if this were actually available, it matches the p, not the number, so the whole p would be styled...not what you wanted. The CSSWG is kicking around these ideas for formatting numerical content...still not what you wanted.

To apply CSS to the numbers, there is no avoiding some additional markup.

Rochet