Using @font-face CSS stylewith an Arabic font?

I am writing the following CSS code to create font face style using an Arabic font, and i am using windows OS...

the problem that browsers doesn't read it, i am testing on chrome, firefox, explorer and opera... the four browsers doesn't recognize the font...

here is my CSS code...

@media screen, print { @font-face {
    font-family: 'FUFONT';
    src: url(../fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), url(../fonts/ScheherazadeRegOT.ttf) format("opentype");
    font-weight:bold; } }

and call it as follow...

.navigation ul li a {font-family: FUFONT, Arial, Helvetica, sans-serif; font-si开发者_如何学JAVAze:18px;}

what do you think the problem is?

The short answer: till now there is no generator for arabic fonts so we can use it in web.

Farther explanation: when using http://www.fontsquirrel.com/fontface/generator with Expert:

• Subsetting: No Subsetting.

• CSS Formats: Smiley

you'll be able to see your Arabic font in the web pages with one problem: no letter reshaping which means that the letters of one word will not be joint together, because there's no generator till now support the required OpenType functionality for Arabic language.

Now you can use Amiri Font ( http://www.phpandthecity.com/2012/12/use-font-face-with-arabic-font.html )

Solution :

1- goto >>> http://www.fontsquirrel.com/fontface/generator

2- upload your font on expert mode

3- check only those values :
--------> Font Formats: woff
--------> Truetype Hinting: Font Squirrel
--------> X-height Matching: none
--------> Subsetting: No Subsetting

4- Download your files

5- past this code into your css file :

  @font-face {
         font-family: 'Name of your font';
         src: url('url to your font.woff') format('woff');
         font-weight: normal;
         font-style: normal;
    }

6- call your font and apply it on some element

ex :

h1{
   font-family : "name of your font" ;
} 

Enjoy it !