How to Use a Snazzy Arabic Font For Your Website

If you are still using one of the basic default boring fonts for your website (because you think they are the only fonts that are supported by majority of browsers); you need to read on this post. And if you think there is not much Arabic fonts out there to use on your website that is supported by nearly all browsers then you definitely need to read on.

So how to go about using non-standard Arabic/English fonts on your website, and still have them supported by majority of browsers?

The secret lies in a CSS tag called @font-face that was introduced since CSS2 but that was not supported properly by all browsers till around late 2008. this will also allow you to use any non-standard English font on your website too. You add this CSS tag to your website's stylesheet which links a font name you choose to the font-file you want to display on your site.

A step by step Example:
1- Get a ttf (TrueType Font) or otf (Open Type) font file: For windows users you can go to "Control Panel > Fonts" copy a font from there and paste it to your desktop.

2- Go to http://www.fontsquirrel.com/tools/webfont-generator which is a service that allows you to create a web-font kit (from any font you have) to ensure that it will render on all browsers. this service will generate the following file extensions that will be used by different browsers: .eot, .svg, .otf, .woff, .ttf, and upload your font file that you copied to your desktop.

3- For Arabic I recommend you disable Subsetting, which is a process that eliminates extra symbols from the font file, and the following options are likely to work with all fonts, although they might not give you the most optimal results, it's worth experimenting with the options, but below is my recommendation.

[click the image to enlarge]

4- Now copy the files to the same folder of the CSS stylesheet you're using and add the following to your CSS:

@font-face{
    font-family:'GE_SS';/* this is the font name you want to use when applying this font to any element using font-family*/
    src: url('ge_ss_two_medium.eot');
    src: url('ge_ss_two_medium.eot?#iefix') format('embedded-opentype'), 
    url('ge_ss_two_medium.woff') format('woff'), 
    url('ge_ss_two_medium.ttf') format('truetype'), 
    url('ge_ss_two_medium.svg#ge_ss') format('svg');
    font-weight: normal;
    font-style:normal;
}

h1{
font-family:GE_SS,Tahoma,Arial;
}

IIS Users:
If you are using IIS7 you need to make sure that the fonts mime-types are defined properly, some fonts may not be even there in the mime-types, make sure you're using the following mime-types for your extensions:

extension: .eot      mime-type: application/vnd.ms-fontobject
extension: .otf       mime-type: application/x-font-otf
extension: .svg      mime-type: image/svg+xml
extension: .woff    mime-type: application/x-font-woff
extension: .ttf        mime-type: application/x-font-ttf

One Last Note:
Are you serving the fonts from a different domain, (ex. your website is "www.mywebsite.com" and the fonts are from "fonts.adobe.com", make sure that you add the CORS ("Access-Control-Allow-Origin:*") header to your response headers.

Have any questions, or need help implementing the font; just leave a comment below.