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.