styling numbers with another font - css

Question

I have a web page with a custom font in Arabic but numbers with that font appear in Arabic and not clear so I want to show it with Arial font (numbers only)?
I used that but not working :
#font-face {
font-family: Arial, Helvetica, sans-serif !important;
src: local("Arial"), local("Arial");
font-style: normal;
unicode-range: U+30-39;
}

Answer 1

You need to name your unicode-range specific font.
In sort I am instructing the browser to use test font for all applied glyphs, then fallback to Ballet
#import url('https://fonts.googleapis.com/css2?family=Ballet&display=swap');
#font-face {
font-family: 'test';
src: local("Arial");
font-style: normal;
unicode-range: U+30-39;
}
p {
font-size: 4em;
font-family: test, 'Ballet', cursive;
}
<p>Hi there! 1 2 3 4 5</p>

Answer 2

If I understand correctly you have to set the unicode-range to the #font-face declaration and then specify the font-family for the element (body, ...) where this font should be used:
I created two examples, one with arial and helvetica mixed and one with arial + Comic Sans MS mixed, since this is easier to see.
#font-face {
font-family: 'myNumbers';
src: local('Arial');
unicode-range: U+30-39;
}
p {
font-size: 2em;
}
.mixed {
font-family: myNumbers, Helvetica;
}
.mixedComic {
font-family: myNumbers, 'Comic Sans MS';
}
.arial {
font-family: Arial;
}
.helvetica {
font-family: Helvetica
}
<p class="mixed">
Hello, I am 123 and 456 with Arial for Numbers and Helvetica for Text
</p>
<p class="mixedComic">
Hello, I am 123 and 456 with Comic Sans MS as Text and Arial for Numbers
</p>
<p class="arial">
Hello, I am 123 and 456 in arial only
</p>
<p class="helvetica">
Hello, I am 123 and 456 in helvetica only
</p>