Font Roboto font is a sans-serif style was 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.

Google Roboto

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 the Roboto font site page and 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 labeled "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".

Here 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 ".fonts" directory. If not, create a new folder 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 in Font 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 site, you can use the "@ font-face" CSS3syntax . This is the method 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 { - 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 '- family





( '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 '
- weight - style - face { - family - weight - style - face { - family - weight - style - face { - family - weight - style - face { - family - weight - style - face { - family Apache Software License








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: bold;
font: normal;
}

@font
font: '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: bold;
font: italic;
}

@font
font: '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: 200;
font: normal;
}

@font
font: '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 ).
font- weight - style - face { - family - weight - style - face { - family - weight - style - face { - family - weight - style - face { - family - weight - style: 200;
font: italic;
}

@font
font: '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: 100;
font: normal;
}

@font
font: '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: 100;
font: italic;
}

@font
font: '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: 300;
font: normal;
}

@font
font: '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 - family: "Roboto" ;

I wish you to install the font you like.

See more: