How to use the Android 4 Roboto font on your website

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.


One response

  1. Hello,

    Is it really legal to use Roboto on someone’s website?

    In the notice accompanying the font, Google says that it is free to use in applications, but with no mention of websites or print. Matias Duarte in the above-mentioned article gracefully turned a blind eye to people’s comments requesting clarifications on Roboto’s usage in websites. Even in the follow-up article he still (most annoyingly) mentioned nothing on the topic. Quite a celestial being, untouched by earthly concerns.

    I also found no place on the internet with a clear statement that Roboto can be legally used on a website.

Talk to me!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: