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

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.