If you want to use the “Purisa Light” font on your Linux hosted website, you can follow the following steps:

  1. Copy the font file from your desktop machine to your webserver. On Ubuntu the “Purisa Light” font file is located at /usr/share/fonts/truetype/thai/Purisa.ttf. e.g:
    scp /usr/share/fonts/truetype/thai/Purisa.ttf <username>@<webhost>:/<pathToWebsite>/fonts/Purisa.ttf
  2. Add the font face to your stylesheet:
    @font-face {
        font-family: 'Purisa';
        src: url('fonts/Purisa.eot'); /* For IE */
        src: local('Purisa'),
             url('fonts/Purisa.ttf') format('truetype');
    }
    
  3. Now you should be able to use it in your site pages. e.g.
    <div style="font-family:Purisa,arial">
    This should be in the "Purisa Light" font...
    </div>
    
  4. BUT, we’re not done yet because unfortunately, IE does not support TrueType (ttf) fonts – only Embedded Open Type (eot) fonts.
  5. Download ttf2eot from http://code.google.com/p/ttf2eot/ – it is a open-source font format converter.
  6. Extract it to your home directory. Then build it:
    cd ~/ttf2eot-0.0.2-2
    sudo apt-get install build-essential
    make
    
  7. Convert the font:
    ./ttf2eot < /usr/share/fonts/truetype/thai/Purisa.ttf > Purisa.eot
  8. Copy it to your website, e.g
    scp /usr/share/fonts/truetype/thai/Purisa.eot <username>@<webhost>:/<pathToWebsite>/fonts/Purisa.eot
  9. Now it should work on IE. If you don’t have time to convert this font, you can grab mine – use “view source” to find the URL from the stylesheet.

@font-face is a HTML5 feature supported by Safari 3.1+, Firefox 3.5+, Opera 10+ and IE 4+. At the time of writing Google Chrome currently doesn’t support @font-face (but the beta version does so it won’t be long).

This post was inspired from an excellent article called @font-face in Depth.

2 Responses to Using the Purisa Light font on a Website

  1. Zaid Huda says:

    please let me know where i went wrong
    http://hzaid.blogspot.com/ this is my blog which i want the text to be in purisa

    @font-face {
    font-family: ‘Purisa';
    src: url(‘http://perahotak.webs.com/Purisa.eot’); /* For IE */
    src: local(‘Purisa’),
    url(‘http://perahotak.webs.com/Purisa.ttf’) format(‘truetype’);
    }
    p
    {
    font-family: ‘Purisa';
    }