How to Install Google Roboto Font on Windows, Mac and Linux | Tips & Tricks
The Roboto font is a sans-serif typeface created by Google that has been around since the days of Android 4.0 (Ice Cream Sandwich). It is an elegant font that renders well on high resolution screens such as Android phones.
Roboto 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.
If you love the font and wish to use it on Windows, Mac, Linux or even your website, then you’re in luck. Google developers have released the Roboto font for free, and you can use it without restriction (under the Apache Software License).
Here’s how to install the Google Roboto Font on all platforms.
Download Google Roboto
Whatever platform you’re on, you first need to download the Roboto font pack.
Go to the Roboto font site and download the font (zipped file). You need to click “Select this Font,” and then at the bottom of the screen click the dark tab that says “1 Family Selected.”
In the newly opened tab, click the “Download” icon to download the Roboto font as a zip file.
Extract the zipped file to a folder of your choice. Open the folder, and you should see all the Roboto fonts inside.
Install Roboto Font on Windows 10
Open the Roboto font folder. Select all the fonts. Right-click your mouse, and select “Install.”
This will install the fonts to your Windows machine. You can now use the Roboto font in your applications.
Install Roboto Font on Linux
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.
Install Roboto Font on Mac
Similar to Windows. Extract the fonts, double-click to install them, and they’ll appear in your Font Book. Alternatively, you can drag-and-drop all of them to your Font Book.
Install Roboto Font on Your Website
If you wish to use the Roboto font on your website, you can use the CSS3 “@font-face” syntax to embed the external font to your webpage.
Go to FontSquirrel Roboto font page, click “Webfont Kit,” then choose your preferred font formats, a subset (if any) and click “Download @Font-Face Kit.”
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
to display the Roboto font on your web page.
That’s it. Enjoy!