how to I use an Arabic font in my css?

StackOverflow https://stackoverflow.com/questions/8371256

  •  27-10-2019
  •  | 
  •  

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

Was it helpful?

Solution

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)

OTHER TIPS

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.

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

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top