Saturday, February 5, 2011

Getting the most out of the Ubuntu font

Ubuntu - Liberation - Arial

 I have never liked the way Windows fonts on Ubuntu were displayed. I don't like them much on Windows either (especially Arial). So when I decided to do a fresh install for Maverick, I thought I will test how fonts will be displayed in browsers when MS fonts weren't installed.

Unfortunately many webmasters when writing CSS for fonts use font-family:"Arial, Sans-serif",  rather than Sans-serif, Arial.
Which means the browser will look for Arial, if it can't find it will use the San-Serif font defined the browser's preferences.

By that logic since I don't have the Arial installed it will use my sans serif font. To my dismay it didn't.
Then after reading up on what are the default font configuration in Ubuntu. I came across the /etc/fonts/conf.d folder which has symbolic links to configuration files in the
/etc/fonts/conf.avail folder.


30-metric-aliases.conf
One of the configuration files is 30-metric-aliases.conf which contains font substitutions.
Including font substitution for Arial and Helvetica with Nimbus and Liberations
A snippet from the file
<alias binding="same">
      <family>Arial</family>
      <accept>
      <family>Liberation Sans</family>
      <family>Albany</family>
      <family>Albany AMT</family>
      </accept>
    </alias>

This meant the browser ends up detecting the presence of Arial or Helvetica by substituting it with Liberation Sans or Nimbus. There is even a bug report on this https://bugs.launchpad.net/ubuntu/+source/fontconfig/+bug/203824
 that the chain of aliases causes Arial to be replaced by Nimbus which is meant to be good on print. But for small font-sizes on web pages it's ugly, (screenshots below).


Font Substitution
You can see what the font substitution is for a particular font with this command:
typing fc-match 'font name'

typing fc-match 'Arial' in a termial
gives LiberationSans-Regular.ttf: "Liberation Sans" "Regular"
fc-match 'Helvetica'
n019003l.pfb: "Nimbus Sans L" "Regular"
fc-match 'Verdana'
DejaVuSans.ttf: DejaVu Sans" "Book"  (how it should be)

If a website decided to use "Helvetica, Arial, Sans" to allow Mac users to use the better font, Ubuntu users are stuffed as they will end up with Nimbus.


In order to prevent this happening I decided to delete the symbolic link to this configuration file. Code and procedure  below after reopen the browser, then I noticed the web pages began to use the sans font in the browser. Initially I tried Droids Sans then I tried Ubuntu. I was blown away by how beautiful websites looked. The font was fuller and smoother. I don't know why Canonical  doesn't change the default font settings to allow Ubuntu to be the font used by Firefox. It will impress new users testing out Ubuntu. I might post this thread in the Natty dev sub-forum to gather support.

Results
The beautiful Ubuntu font















In this Picasa gallery I have uploaded screenshots of the websites after removing the 30-metric-aliases.conf file to allow websites to use the Ubuntu font, and without it, and also with MS fonts installed.


Here are links to the web pages in the screenshots if anyone else wants to compare.
http://www.smh.com.au/technology/technology-news/google-accuses-microsoft-of-stealing-its-search-results-20110202-1acsl.html
http://www.skysports.com/story/0,19528,11667_6717898,00.html
http://www.imdb.com/title/tt0053125/
http://forums.whirlpool.net.au/

Using nvidia binary drivers, with font-setting on sub-pixel smoothing (LCDs)

Code and Procedure
To stop the config file from loading
sudo rm /etc/fonts/conf.d/30-metric-aliases.conf
and then run
sudo fc-cache -fv
Reopen browser

Note to place back the file
cd /etc/fonts/conf.d
sudo ln -s ../conf.avail/30-metric-aliases.conf
and then run
sudo fc-cache -fv
Reopen browser

7 comments:

  1. dude you have a typo in the title of this post...

    ReplyDelete
  2. Thanks mate. and a great blog in the making.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. I find noto sans and droid sans to be the best ones. both are freely available from google webfonts.

    check my post here

    http://www.binarytides.com/gorgeous-looking-fonts-ubuntu-linux/

    ReplyDelete