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?
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With