How to Use The Google’s Roboto Font Everywhere

The Roboto font is a new set of sans-serif font created by Google for the Android 4.0 Ice-Cream Sandwich platform. It is a nice and elegant font that renders well on high resolution screens such as your Android phones and tablets. It contains the full set of font weight (includes regular, bold, italic, and bold italic weights) and is used mainly for system apps and all Google apps. This is also the first step by Google to unify the platform and reduce the UI fragmentation issue.

For those who love the font and wish to use it on their applications such as Microsoft Word, Pages, Photoshop, Gimp, or even on their website, Google has kindly released the font for free and you can now use it without any restriction (under the Apache Software License).

Here’s how you can use it (almost) everywhere.

1. First, go to the Roboto font site and download the font (zipped file).

roboto-font-download

2. Extract the zipped file. You should see a folder named “Roboto_Hinted_20111129″. Open the folder and you should see all the roboto fonts (in (under the Apache Software License). (under the Apache Software License). (under the Apache Software License). various weight) in .ttf format.

Open your home folder and enable the option to view hidden files/folders. Locate the “.fonts” folder. If it doesn’t exist, create it. Next, move the Roboto font folder to this “.fonts” folder.

Restart your LibreOffice, GIMP, Photoshop or whatever apps you are using. You should see the Roboto font available for selection.

Open the Roboto font folder. Select all the fonts. Right-click your mouse and select “Install”.

roboto-font-windows-install

This will install the fonts to your Windows machine. You can now use the Roboto font in your applications.

Simply drag all the Roboto fonts to your Font Book.

Since the font is a system level application, you won’t be able to change the font easily in your Android phone. For those who have an older Android phone (prior to Android 4.0 ICS), you will have to root your phone and install the Font Changer app Custom Android Font Switcher.

Open your File Manager app, navigate to the root of the SD Card (/sdcard) and create a folder (if not exist) “.fontchanger”. Place all the Roboto font in this folder. Open the Font Changer app and grant it SuperUser permission. Once it is loaded, you should see the Roboto font for selection in the main menu.

roboto-font-android-install

There is no way to change the iOS system font without jailbreaking the device. Be prepared to void your warranty.

1. Jailbreak your iOS device and install BytaFont from Cydia.

2. Next, go to “Cydia -> Section -> Fonts” and install the Roboto font

3. Lastly, run the BytaFont app and you should see the Roboto font in the list, ready to be applied.

If you wish to use the Roboto font in your website, you can use the CSS3 @font-face syntax to embed external font to your webpage.

1. Go to FontSquirrel Roboto font page and click the “@font-face Kit” link. Download the “@font-face kit”.

roboto-font-fontsquirrel-download (under the Apache Software License).

2. Extract the zipped file to your website font folder. Open your web stylesheet and add the following code:

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Italic-webfont.eot');
    src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Italic-webfont.woff') format('woff'),
         url('Roboto-Italic-webfont.ttf') format('truetype'),
         url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-LightItalic-webfont.eot');
    src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-LightItalic-webfont.woff') format('woff'),
         url('Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-MediumItalic-webfont.eot');
    src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-MediumItalic-webfont.woff') format('woff'),
         url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

Make sure you change the “src” to point to the path of the font folder.

Next, you can use the syntax

font-family:"Roboto";

to display the Roboto font on your web page.

That’s it. Enjoy!