Using @Font-Face CSS Stylewith an Arabic Font

how to I use an Arabic font in my css?

What do you mean with Arabic fonts? Most "normal" fonts we use every day will work just fine in CSS. Do make sure to set the RTL properties though, where needed. After all, you don't want Arabic people to read left-to-right, do you? :-)

<html dir="rtl"> (combined with an English website it looks funny, but it's what you need for Arabic and other RTL languages)

Font conditional style CSS

You can override the actually used fonts via @font-face rules with specific unicode ranges:

p {
   font-family: "Arno-Pro", serif;
   font-style: italic; 
}

/* default latin */
@font-face {
  font-family: "Arno-Pro";
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2) format('woff2');
  font-style: italic;
}

/* override for arabic unicode range */
@font-face {
  font-family: "Arno-Pro";
  src: url(https://fonts.gstatic.com/s/notosansarabic/v18/nwpxtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlhQ5l3sQWIHPqzCfyGyfuXqA.woff2) format('woff2');
  /* arabic unicode range */
  unicode-range: U+0600-06FF;
  font-style:italic;
}

<p class="mixed">Lorem ipsum لكن لا بد latin text again</p>

css arabic ttf font doesn't work

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).

Using @Font-Face CSS Stylewith an Arabic Font

how to I use an Arabic font in my css?

Font conditional style CSS

css arabic ttf font doesn't work

update 1

Related Topics

Leave a reply