Using Web Open Font Format (WOFF) for Arabic and Urdu

WOFF is font format especially designed for the web. Developed in 2009, it is the future standard format that will be adapted by W3C. WOFF is basically an encoding/compression technique by which other fonts will be packed and ready for download with the web page just like images.

This way the developer can design using any font and the look-n-feel will remain the same.

Converting fonts to WOFF format

There are many tools available to convert fonts to WOFF format:

  1. Online Font Generator (http://www.fontsquirrel.com/fontface/generator)
  2. The FontForge tool, but the WOFF support is not fully added.
  3. The sfnt2woff command line tool available for Windows and Mac on http://people.mozilla.com/~jkew/woff/
    Command example:

    sfnt2woff.exe <fontname>.ttf

Using WOFF fonts in Web pages

  1. The converted WOFF fonts can be placed in the web directory (for example under fonts directory).
  2. Next, the CSS needs to applied:
    @font-face {
       font-family: "myFont";
       src: url("fonts/myfont.woff");
    }
  3. This will add the font with the name myFont as a resource.
  4. This can now be referred to any text as:
    font-family: 'myFont', 'serif';
  5. The font will be downloaded and then applied to the web page.

The Problem with Arabic and Urdu fonts

There are however certain problems when it comes to Arabic and Urdu fonts. The conversion results in an error. So for the time being the conversion tools are not suitable and appropriate for Arabic and Urdu fonts.

Advertisements

8 thoughts on “Using Web Open Font Format (WOFF) for Arabic and Urdu

  1. So, did you come up with a solution to this problem? I’m trying to install woff fonts on my site as well and I haven’t had any luck either. I was wondering if you have made any progress. (I tried all sorts of conversion tools and while some worked, they were approximately 15mb in size and not really suitable to be used as a webfont face.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s