How to use “unicode-range” for numbers

Question

I'm using a custom font and loading it through @font-face. I want to display text with two languages in webpage with different fonts with font-face at rule in CSS using unicode-range property. Text looks fine, but not the numbers. In Persian text, numbers are still English.

<span class="text">test 123</span>
<span class="text">تست 123</span>

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb(FaNum).eot');
    src: url('../_fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb(FaNum).ttf') format('truetype');
    unicode-range:U+0600-06FF;
}

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb.eot');
    src: url('../_fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb.ttf') format('truetype');
    unicode-range: U+0020-007F;
}

.text{font-family: 'MyFont';}

Answer 1

You have defined the FaNum¹ variant of the font only for characters in the range U+0600-06FF (namely, Arabic/Persian characters). So, it is not applied to Latin characters 1, 2, 3, etc.

Here, I have modified the unidoce-range properties so Latin numerals (U+0030-0039) are rendered with the FaNum font:

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb(FaNum).eot');
    src: url('../_fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb(FaNum).ttf') format('truetype');
    unicode-range: U+0600-06FF, U+0030-0039;
}

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb.eot');
    src: url('../_fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb.ttf') format('truetype');
    unicode-range: U+0020-002F, U+003A-007F;
}

.text { font-family: 'MyFont'; }

I think instead of the above code, you could simply use the FaNum font for all text. As far as I know, it is exactly the same as the regular font with Latin numerals represented in Persian glyphs:

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb(FaNum).eot');
    src: url('../_fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb(FaNum).ttf') format('truetype');
}

.text { font-family: 'MyFont'; }

Side note

In my opinion the correct way is to use actual Persian numerals instead of using Western numerals and just changing the display of characters with fonts:

<span class="text">test 123</span>
<span class="text">??? ???</span>

Modern OSs support standard Persian keyboard. You can change the language to Persian (Farsi) and type Persian numerals with the top row of the keyboard.

Also, programming languages usually have facilities for localizing and formatting strings and numbers.
See this post for how to format numbers in JavaScript and see this article for how to format numbers in Java.

---

^{1: Some Persian fonts provide a special variant of their font which have their Western Numeral Unicode values show Eastern Numeral glyphs (for example, for the Unicode value U+0030 which is 1 they show ??).}