This site previously used the font named Droid, which is the open source font used by Android. With last week’s introduction of Android 4, however, they’ve created the Roboto font – this has been designed for HD screens, so is perfect for websites.

You can learn more about the Roboto font from a Google+ post by Matias Duarte, the Director of the Android User Experience.

If you wish to use a non-standard font for your website then there are a number of ways to do this. However, I prefer to use the font-face CSS option. It’s not without its disadvantages, so read up on it before proceeding.

For each font that you wish to add simply add the following code to your CSS…

@font-face {
    font-family: 'DroidSansRegular';
    src: url('DroidSans-webfont.eot');
    src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('DroidSans-webfont.woff') format('woff'),
         url('DroidSans-webfont.ttf') format('truetype'),
         url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

You’ll need to change the font-family to the name that you wish to give the font. Then there are 5 references to the font files – 4 different types to cover different browser requirements. Again, these will need changing appropriately.

If you wish to use either Droid or Roboto I’ve bundled them up ready for font-face (i.e. with each of the 4 formats that are required).

• Download Droid – There are 3 versions of the font – standard, bold and mono space.
• Download Roboto – There are 2 versions of the font – standard and bold.