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

Initial test post

Testing out with some lorem ipsium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis varius turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra metus luctus lacus vulputate porta. Integer sodales posuere urna sed faucibus. Aenean adipiscing elit at justo pellentesque hendrerit. Nunc congue laoreet ullamcorper. Quisque commodo rhoncus viverra. Donec ac felis vel dolor vestibulum lobortis ultricies nec leo. Vivamus varius, lorem at tincidunt lacinia, purus nunc aliquam quam, id tincidunt lectus sapien sit amet leo. Duis nec mi sem, a commodo enim. Duis id orci in leo venenatis volutpat.

Fusce laoreet, nisl ac tristique consequat, velit eros mollis est, a pellentesque mi lectus vel urna. Integer aliquam nibh at justo tristique et fringilla tellus faucibus. Donec tempor lobortis justo, quis consequat magna accumsan id. Nunc lobortis sagittis nulla et ullamcorper. Donec ut lorem felis. Maecenas laoreet elit in lectus tincidunt bibendum in sit amet quam. Cras bibendum, sem vitae consectetur imperdiet, tortor quam volutpat lectus, quis rhoncus enim nisi a elit. Sed id viverra elit. Donec magna nibh, posuere non placerat in, adipiscing ac nisi. Proin pharetra posuere augue. Cras eu arcu odio. Vivamus mauris sapien, pellentesque non sodales sed, commodo aliquet est. Quisque hendrerit, erat vitae auctor varius, neque nisi aliquet enim, eget rhoncus mi turpis at quam. Morbi ac mi et neque hendrerit pharetra vitae eu nisi. Nullam at blandit nisi. Proin semper, enim in mollis porttitor, est mi rhoncus lectus, ac fermentum purus lacus ac lacus. Donec lacinia luctus cursus. Quisque in ipsum vel ligula blandit pulvinar. Aliquam ornare ultricies sagittis. Proin quis ante odio, quis vestibulum nulla.