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 text in Tahoma)

I could do it for each of them, but they are A LOT, so this is not an option.

Is there an easier way?

Answer 1

The easiest way I found of doing it is just adding &text012345689 to the end of your @import url that you get from Google Fonts, like this:

@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap&text=0123456789");

Then you can add another one that you will use for your text, you import it just like a normal import:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

And then finally in your css you can just simply do this and it will work:

body {
  font-family: "Inconsolata", "Montserrat", sans-serif;
}

This will apply the "Inconsolata" font to all of your numbers, and the "Montserrat" font to all of your other text.

Answer 2

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 3

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>