0

I used many English ttf fonts in my website and it worked very well, but when I try to do the same thing using Arabic ttf fonts it does't work, it works only if I used otf fonts which it isn't available too much compared to ttf. is there any way to make the Arabic ttf fonts works ?

I am using this code:

<style> 
@font-face {
font-family: myFont;
src: url(moga.ttf);
}

div {
font-family: myFont;
}
</style>
user2420263
  • 157
  • 1
  • 4
  • 15

1 Answers1

1

Your font from the jsFiddle works and displays correctly for me (in firefox 36), at least, it is arabic script, so I assume that's the desired result, although I can't understand it.

What browser are you using?

update 1

You need to ensure the font ttf is referenced correctly, you need to upload the ttf to the website and link to it, so for example only, if you are saving the ttf to /includes/fonts/CSDiwany4S_Inormal.ttf then your CSS should look like this 

@font-face {
font-family: myFont;
src: url("/includes/fonts/CSDiwany4S_Inormal.ttf");
}

div {
font-family: myFont;
}

And this will work. You have told me your font should look like this:

http://photoshop.cc/wp-content/fonts/arabic_fonts_img/horr/new/Tachkili%20Font%20TTF.gif (this is primarily for other westerners here who are seeing the original basic arabic font on the jsFiddle and are assuming that this is the intended output).

Martin
  • 22,212
  • 11
  • 70
  • 132
  • the font should look like this: http://photoshop.cc/wp-content/fonts/arabic_fonts_img/horr/new/Tachkili%20Font%20TTF.gif – user2420263 Mar 24 '15 at 09:54
  • Your jsFiddle does not work: you need an absolute URL to your font: currently it says: "NetworkError: 404 NOT FOUND - https://fiddle.jshell.net/ot8ae8qd/3/show/MCSDiwany4S_Inormal.ttf" – Martin Mar 24 '15 at 10:21
  • thanks for the reply, I got your answer that the ttf file src should be correct but still didn't work, I uploaded my whole code you can download it here: http://www.filedropper.com/testing_1 – user2420263 Mar 24 '15 at 14:34
  • Hmm, I am having no luck working here- so what about some other ideas to see where the problem lies: 1) can you use another arabic TTF font to give the correct output? 2) Change your HTML encoding to Windows-1256 . Possibly read http://stackoverflow.com/questions/8674121/arabic-character-encoding-issue-utf-8-versus-windows-1256 . Hope that helps a little, esp. the first reply. Good luck! – Martin Mar 24 '15 at 15:38
  • That's awesome. but to clarify, It was the Windows-1256 encoding that fixed it? :) – Martin Mar 25 '15 at 10:27
  • no, actually the problem was from the font itself, I was using ttf fonts that are designed for android or word-press. I found another ttf fonts and worked perfectly in my website. – user2420263 Mar 26 '15 at 11:46