New browsers are capable of showing custom embedded fonts which can be specified by using @font-face css tag. This allows web designers to use custom fonts which users don't need to install on their machine.

With custom font (Hussaini Nastaleeq):

Without custom font (System default):

If font style is same in all above samples, you are probably not using most recent browser capable of using font-face css style.

The custom font `Hussaini Nastaleeq` is a fork of Nafees Nastaleeq and is available here. The font is quite small in size (~ 300K) and browser should only download them if they are used by the page.

Tested on Linux (Fedora 17) on Chrome Version 22.0.1229.94 and Firefox Version 16.0.1, Opera (Windows) and Chrome (Windows). The best rendering is on Firefox though.

Numerous efforts are made to make this font work on IE 8 (which uses eot), however, still not able to make it work on IE8 unfortunately. The font is converted from ttf to eot on Linux using ttf2eot eot-utilities.

On JBoss side (if using JSF), you probably need to specify correct mime types for the font types. Here are the implementation details:

- web.xml:

        ttf
        application/octet-stream
  
  
        eot
        application/vnd.ms-fontobject
  

/* Required first for IE, no format */
@font-face
{
  font-family: u;
  src:  url("#{resource['fonts:nafees_riqa.eot']}");
}

@font-face
{
  font-family: u;
  src: url("#{resource['fonts:nafees_riqa.ttf']}") format('opentype');
}

#nrfont {
  font-family: u;
  font-size: x-large;
}

  <h:outputStylesheet name="uzi.css" library="css" />

<div id="nrfont"> ...