Using the Purisa Light font on a Website

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>
   

   • This paragraph should be in the “Purisa Light” font. You can download thai-ttf-0.4.3.tar.gz for free from the Thai Linux Working Group (TLWG).
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.