The Roboto font is a sans-serif typeface created by Google. It’s elegant and renders well on high-resolution screens, such as Android phones. As such, it’s a perfect fit for many applications. What’s more, learning how to install the Google Roboto font on Windows, macOS, and Linux is a piece of cake.
Downloading the Google Roboto Font
Regardless of your platform, you first need to download the Roboto font pack. To do this, head to the Roboto font site. The simplest way to download the entire font family is to click the “Download Family” button on the top right.
It will end up as a ZIP file on your computer, at which point you’ll be able to install it on your operating system.
If your fonts come out looking pixelated or corrupted in any way, try these troubleshooting steps to fix the issue.
The great news is that regardless of the platform, you can install the Roboto font in a matter of clicks.
Install Google Roboto Font on Windows
Follow these steps to install the Roboto font on Windows:
- Unzip the Roboto font folder. Right-click and select “Extract All.”
- Open the “Start” menu, and select “Settings.”
- Click “Personalization” and choose “Fonts” from the list of settings on the right.
- Drag the extracted fonts onto the installer window. After a few seconds, the Google Roboto font will be installed on Windows. You can select it as you would any other font from within applications.
To install other types of fonts or just see what’s available in Windows, check out our guide for installing and managing fonts on Windows.
Install Google Roboto Font on macOS
Follow these steps to install the Roboto font on Mac:
- Extract the ZIP file. Either double-click or right-click and select “Open.”
- Select all the fonts inside the folder (skipping over LICENSE.txt), right-click, and select “Open With -> Font Book” from the context menu.
- This will load them into Font Book and make them available for use in your applications.
Note that you can also double-click the individual font files to load them into Font Book.
Install Google Roboto Font on Linux
- Extract the zipped files with the unzip command.
- Open your home folder, and enable the option to view hidden files/folders. You can press Ctrl + H, or click the “View” menu and choose “Show hidden files.”
- Locate the “.fonts” folder. If it doesn’t exist, create it.
- Move the Roboto font folder to this “.fonts” folder.
Alternatively, make use of the Font Manager program to manage your fonts.
- Install Font Manger from the Software Center or repository.
- Once it’s installed, open this and the Fonts app (again, from the Search Bar).
- Within the Font Manager, make sure you’re on the Manage tab, and click the Plus (+) icon.
- Navigate to your extracted font folder, and add them as required.
Once you restart the apps you’re using, you should see the Roboto font.
While Linux shouldn’t have any issue with Roboto, some distros, such as Ubuntu, can have trouble recognizing certain fonts. If you have issues with Roboto or other fonts in Ubuntu, try converting them to the TrueType font format.
Using the Google Roboto Font on a Website
If you wish to use the Roboto font on your website, use the CSS3 @font-face syntax to embed the external font to your webpage.
- Go to the 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.
- Use the syntax
font-family:"Roboto";to display the Roboto font on your web page.
If you have any issues getting Roboto to display correctly, Google has a quick start guide that can help.
Frequently Asked Questions
Is there a serif version of Roboto?
Yes. In early 2022, Google fonts added Roboto Serif to its library. It’s free to download, and you can install it just like Roboto. Use both on your system if you want.
Do I ever have to pay to use Roboto or other Google fonts?
No. They are completely open source. According to Google, you’re free to use them in both personal and commercial projects, completely free of cost. If you’re an Android app developer, add the fonts to your apps.
Can I install other Google fonts at the same time?
You can download and use as many Google fonts as you want. At the time of writing, there were over 1,500 font families to choose from. These come in serif, sans-serif, display, handwriting, and mono varieties.
How can I tell if an image or site is using Roboto?
If you’re admiring the font on a website or in an image, there are quite a few useful tools to help you identify the font. This will quickly tell you whether the image or site is using Roboto or another font.
Image credit: Google Fonts. All screenshots by Crystal Crowder.
Our latest tutorials delivered straight to your inbox
