CSS: Styling numbers and text with different fonts

Question

I\'d like that all the numbers and all the punctuation in my website have a font-family, while the rest of the text has another. (Example: numbers and punctuation in Arial and t

Answer 1

In my case the website was half done and then I needed to change font of all the numbers across the site. I need to change all the numbers to Oxygen font. This is how I did it.

/* latin-ext */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/LC4u_jU27qpsdszDEgeU_3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+30-39;
}

And then replaced the font-family: "Poppins", sans-serif; to font-family: "Oxygen", "Poppins", sans-serif;

The new font-family style will apply Oxygen font to all the text but we have restricted Oxygen fonts to be applied to 0-9 numbers only using the unicode-range property. for all other text except numbers, Poppins font will be applied.

Note: U+30-39 is the range of 0-9 numbers.

Answer 2

You can set one font-family for your body i.e. Tahoma, and then wrap any of your numbers and punctuation marks inside a <span> tag, for e.g. <span class="numbers"></span> and then set a different font-family for the span tag using CSS like this:

.numbers {
     font-family: Arial;
}

Here's an example:

body {
  font-family: Arial;
}
.numbers {
  font-family: Tahoma;
  color: red;
}

Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet <span class="numbers">123-456-789</span>. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum
dolor ismet. Lorem ipsum dolor ismet. <span class="numbers">"</span>Lorem ipsum dolor ismet<span class="numbers">"</span>. Hello World<span class="numbers">???????</span>

Answer 3

The best way is to create 2 classes, one with Arial and one in Tahoma. And then asign the class of what element you want.