Look at the difference between these two 50px headers that use the Georgia font:

Windows/Ubuntu font comparison - Georgia

The top one is from IE8 on Windows Vista, whereas the bottom one is from Firefox 3.0.15 on Ubuntu 9.04. On Windows, the text is clearly less pleasant on the eye? It is has jagged edges, has a pixel or two cut off the end of the ‘s’ and is 17 pixels less wide.

This is the styling code:

#logo h1 {
font-family:Georgia, Arial, sans-serif;
font-size:50px;
font-weight:normal;
letter-spacing:-0.05em;
line-height:normal;
}

Read on…

In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:

Tutorial end product

aBlankCanvas
Click to enlarge

Real-world example

a non-blank Canvas
Click to enlarge

Read on…

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.