Nov 27 2009

Why does some website text look bad on Windows?

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…

speech bubble icon No Comments » | category icon Category: Web Design | tags icon Tags: , , , | link icon Permalink
Posted by Tom

Oct 12 2009

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>
  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.

speech bubble icon 2 Comments | category icon Category: Web Design | tags icon Tags: , , | link icon Permalink
Posted by Tom

Jul 10 2009

Installing fonts in Ubuntu

Ubuntu Logo 200x52

If you have a font file with a “ttf” extension you can easily install it in Ubuntu (v9.04) and use it in applications such as the Gimp. Essentially, all you have to do is drop it in the correct folder:

  1. cd /usr/local/share/fonts
  2. If the truetype/custom directory doesn’t exist already: sudo mkdir truetype sudo mkdir truetype/custom
  3. sudo cp where_you_downloaded_the_new_font/fontname.ttf /usr/local/share/fonts/truetype/custom
  4. sudo chown root.root /usr/local/share/fonts/truetype/custom/fontname.ttf
  5. fc-cache – Otherwise, the font will disappear at the next reboot.

The following text was created in the Gimp: It uses 3 free fonts, the “B” is Heavy Data, the “it” is Sans Bold and the “volution” is Ballpark:

ttf font demo

speech bubble icon No Comments » | category icon Category: Technical | tags icon Tags: , , | link icon Permalink
Posted by Tom