How to install Google Roboto fonts on Windows, Mac and Linux

Roboto font is a sans-serif style font created by Google.This font has appeared since the early days of Android 4.0 (Ice Cream Sandwich) with the advantage of elegance and good visibility on high-resolution screens like Android phones.

Roboto is full of typefaces (including regular, bold, italic, italic, and bold) and is used primarily on system applications and all Google applications.

There is good news for these font lovers, that Google developers have released the Roboto font for free and you can use it without restrictions (under the Apache Software License).So now you can completely use it on Windows, MAC, Linux or even on your website.

Here's how to install Google Roboto Font on all of the above operating system platforms.

Download Google Roboto

No matter which operating system you use, the first and most important thing is to download the Google Roboto font set to your device.

Visit theRoboto font sitepageand download the font (compressed file).You need to click on 'Select this Font' and then at the bottom of the screen, click on the dark tab with the content '1 Family Selected'.

In the newly opened tab, click the "download" icon to download the Roboto font.The font set will then be downloaded as a zip file.

Extract the zip file you just downloaded into an arbitrary folder.Open that folder and you will see all the Roboto fonts inside.

Install Roboto Font on Windows 10

Open the Roboto font folder.Select all fonts, then right-click and select 'Install'.

At this point the font will automatically be installed on your system after a few minutes.Now you can use the Roboto font on the applications in the machine.

Install Roboto Font on Linux

Open your home directory and then enable the hidden file / folder mode.Find the directory '.fonts'.If not, create a new directory with the '.fonts' extension.Next, move the folder containing the Roboto font into the '.fonts' folder you just created.

Next, restart LibreOffice, GIMP, Photoshop or any application you're using.You will see the Roboto font appear to choose.

Install Roboto Font on MAC

For MAC, the same way as on Windows.First you unzip the font, double click to install and Roboto will appear inFont Book.yours.In addition, you can also drag and drop them into your Font Book.

Install Roboto Font for website

If you want to use the Roboto font on your website, you can use the syntax '@ font-face' CSS3.This is the way to embed fonts from the outside into the web.

Access the FontSquirrel Roboto font page, click "Webfont Kit" , then select the font formats you like and click 'Download @ Font-Face Kit.'

Unzip the downloaded file into the font directory for your website.Then open the stylesheet on your website 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 the path of the font directory.

Next, you use the following syntax to display the Roboto font on your website:

 font-family : "Roboto" ; 

I wish you to install the font you like.

See more:

1. Website helps you manage all fonts installed in your computer
2. 5 websites to find and download free fonts
3. Instructions to download a huge free font set from Google, support Vietnamese
4. 8 "recognition" fonts used on applications or websites