The FaNum1 font variant has been specifically defined for Arabic/Persian characters in the range of U+0600-06FF. This means that it will not be applied to Latin characters such as 1
, 2
, 3
, and so on.
To address this, I have made modifications to the unicode-range
properties so that Latin numerals (U+0030-0039) are now rendered using 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'; }
In my opinion, instead of the above code, you could simply use the FaNum font for all text. Essentially, it is the same as the regular font but with Latin numerals displayed 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'; }
Note
I believe the appropriate approach would be to use actual Persian numerals instead of Western numerals and relying on font changes for display:
<span class="text">test 123</span>
<span class="text">تست ۱۲۳</span>
Most modern operating systems support a standard Persian keyboard layout. By switching to Persian language input, you can easily type Persian numerals with the top row of your keyboard.
Additionally, programming languages typically provide tools for localizing and formatting strings and numbers.
Check out this post for guidance on number formatting in JavaScript, and refer to this article for information on number formatting in Java.
1: Certain Persian fonts offer a specialized variant where Western Numeral Unicode values are displayed using Eastern Numeral glyphs (for instance, representing the Unicode value U+0030 which corresponds to 1
as ۱
).