'How to change font family only numbers

On whole my website there are many places that use numbers. because my font doesn't good to numbers.I would like to change font them to what I wanted.

now similar questions asked before but I not find a good answer to do this. some answers suggests to use jquery/javascript function. but I think using jquery/javascript function make lazy my webpages.

Is there any better solution?

javascriptjquerycss


Solution 1:[1]

You could add a class to every occurence of numbers on your page, and simply change the font-family of said class.

HTML

<p> .... <span class="number">42</span> ... </p>

CSS

.number{
  font-family: 'myFont';
}

Solution 2:[2]

You can use a class for all your number set like this:

//css
.number{ font-family: 'your-font-name', fallback-font; }

//html
<p>something <span class='number'>877866</span> goes here</p>

Solution 3:[3]

in css : 

input[type="number"] {
    font-family: 'customFont';
}

in html :

<input type="number" name="number">

Solution 4:[4]

NUMBERS TO MONOSPACE

To anyone who is doing this just so he could have numbers as a monospace font, i would recommend doing this instead:

input{
font-variant-numeric: tabular-nums
}

Here is more info about it

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zenoo
Solution 2 S.M. Shakil
Solution 3 Andhy Taslin
Solution 4 Dremiq

Related Questions