How do I use Dejavu font for Arabic website? - css

Question

I was finally able to get my site to show an Arabic font, but it is a default font that I don't want.
With the help of the SO community I found out about Dejavu fonts. I went to their website and downloaded a sans serif zipped folder. I am assuming I have to upload something to my server. If so which file/s do I upload? And what do I write in my html file to "reference" the fonts to my site? I opened all the files in the zip folder and only one of them indicated that I can download the font. But I don't need to download it on my computer. I need to upload it to the cloud so that it will be on my website.
Any ideas?
Also How can I upload the Dejavu folder here so that people can see it and know what I am talking about?

Answer 1

#font-face and #font-face Font Squirrel Generator

Answer 2

If you wish to use font embedding (and #font-face), then you need to present the font in different formats if you wish cover most platforms. See e.g. The Essential Guide to #font-face.
But there’s a much simpler way: just declare your preferred fonts (after checking that each of them covers all the characters you use) in your font-family declaration in CSS. Not all people would then see the text in DejaVu (only those who have got it along with e.g. Linux of OpenOffice or who have separately downloaded an installed it). The overhead of downloading a largish font, or several fonts, is not ignorable, especially when using e.g. slow mobile connections.

Answer 3

Expanding on bookcasey's point:
Check out the #font-face kits at Font Squirrel. There are several DejaVu kits available. Kits include the CSS and the DejaVu files in pretty much every available format you can use on the web. Put the font files in whatever folder you like and alter the CSS accordingly.
For example, I store my font definitions in /css/fonts.css and my fonts in /fnt/FontName/
From fonts.css
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.svg#DejaVuSansOblique') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.svg#DejaVuSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.svg#DejaVuSansBoldOblique') format('svg');
font-weight: bold;
font-style: italic;
}
Using the font is then simply:
body {
font-family: 'DejaVu Sans',sans-serif;
}