styling numbers with another font

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>