how to I use an Arabic font in my css?

Question

I just found out that there is no generator for Arabic fonts, because of the issue of connecting the letters... Does that mean that the only choice I have is to get it from fonts.com? Does anyone know of a place were I can get good quality arabic fonts to use for my website?

#ArbText01 {
    position:absolute;
    top:130px;
    right:10px;
    font-family:adobe arabic;
    font-size:30px;
    color:#fb5e08;
    padding-top:0px;
    padding-bottom:0px;
    direction:rtl;
}

<div id='ArbText01'>ةالفصح
        </div>

http://arabic001.com/home.html

Enclose font names that have a space in quotes (`"Adobe Arabic"`). Also mind the capitals in the names. — Tom van der Woerdt, Dec 03 '11 at 22:36
possible duplicate of [What are my "web font" choices for Arabic?](http://stackoverflow.com/questions/7185106/what-are-my-web-font-choices-for-arabic) — Peter O., Dec 05 '11 at 06:07

score 7 · Answer 1 · answered Nov 21 '16 at 04:45

7

Here ist one simple way to get fonts in css:

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

.droid-arabic-kufi {
  font-family: 'Droid Arabic Kufi', serif;
}

Look at http://fonts.googleapis.com

answered Nov 21 '16 at 04:45

SaDoS

93
2
5

score 5 · Accepted Answer · answered Dec 03 '11 at 21:48

5

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)

answered Dec 03 '11 at 21:48

Tom van der Woerdt

29,532
7
72
105

I am very confused now. Maybe I should clarify. I want to use Arabic text and English text on the same page. So I understand the directionality issue. Where do I get the fonts from if I don't like the Arabic fonts that I have on my computer? Also I am getting gibberish and not Arabic. I am posting my codes and url in my question. – L1900 Dec 03 '11 at 22:33
Make sure that you're using Unicode (preferably UTF-8) and a font that actually supports Arabic. I do not have any experience with downloading Arabic fonts and I am not sure whether that's a proper question for SO. – Tom van der Woerdt Dec 03 '11 at 22:35

score 2 · Answer 3 · answered Mar 17 '13 at 04:50

you should provide a font-face like this:

@font-face {
    font-family: 'mywebfont';
    src: url('adobe_regular.eot');
    src: url('adobe_regular.eot?#iefix') format('embedded-opentype'),
         url('adobe_regular.woff') format('woff'),
         url('adobe_regular.ttf') format('truetype'),
         url('adobe_regular.svg#adobe_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

and now you should use 'mywebfont' as font family.

score 1 · Answer 4 · answered Sep 01 '18 at 16:26

I will show how easy to integrate the "droidarabickufi" font onto your CSS file and how easy to apply it to your entire document (instead of applying it to individual classes).

First, Add this line at the top of your CSS document...

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

Then apply the rule to the "HTML" tag (to apply it for the entire doc).

html{font-family: 'Droid Arabic Kufi', serif;font-size:100%;}

Note: you have to check if another class uses custom font family like "Tahoma" or "Sans" or "Arial" or others.

score 1 · Answer 5 · answered Dec 03 '11 at 22:02

1

You could always find a free font from somewhere. I'm sure a quick google search would yield excellent results. If your talking about getting them to work, you'll need to look into UTF-8 encoding so that all the characters display correctly.

answered Dec 03 '11 at 22:02

Marc DiMillo

513
5
17

1

someone else also just mentioned UTF-8 encoding. You are all saying I should use it. Where? How? Is it a code that I write, download? Where do I write it? I have never heard of it. – L1900 Dec 03 '11 at 22:45
It's HTML encoding I believe. I don't do HTML alot so I can't tell you. A quick google search would yield plenty of useful information. – Marc DiMillo Dec 04 '11 at 01:41
I checked my html file and it is encoded in UTF-8 (I went to save as and it showed that). I also went to the following link and they are saying that I need to declare it. http://www.w3.org/International/questions/qa-html-encoding-declarations#httpsummaryHow do I do that? But the Arabic text is still showing as something else. – L1900 Dec 04 '11 at 22:04

how to I use an Arabic font in my css?

5 Answers5