CODEWITHSUNDEEP
cssfontsarabicwebfonts
L1900
L1900

Reputation: 147

how to I use an Arabic font in my css?

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

Upvotes: 7

Views: 51605

Answers (5)

Jodyshop
Jodyshop

Reputation: 664

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.

Upvotes: 1

SaDoS
SaDoS

Reputation: 93

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

Upvotes: 7

Hadi77
Hadi77

Reputation: 137

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.

Upvotes: 3

Marc DiMillo
Marc DiMillo

Reputation: 513

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.

Upvotes: 1

Tom van der Woerdt
Tom van der Woerdt

Reputation: 29965

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)

Upvotes: 5

Related Questions