228

I want to use Google's Roboto font on my website and I am following this tutorial:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

I have downloaded the file which has a folder structure like this:

enter image description here

Now I have three questions:

  1. I have css in my media/css/main.css url. So where do I need to put that folder?
  2. Do I need to extract all eot,svg etc from all sub folder and put in fonts folder?
  3. Do I need to create css file fonts.css and include in my base template file?

The example he uses this

@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;
}

What should my url look like, if I want to have the dir structure like:

/media/fonts/roboto

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
user26
  • 3,937
  • 5
  • 22
  • 22

14 Answers14

347

You don't really need to do any of this.

  • Go to Google's Web Fonts page
  • search for Roboto in the search box at the top right
  • Select the variants of the font you want to use
  • click 'Select This Font' at the top and choose the weights and character sets you need.

The page will give you a <link> element to include in your pages, and a list of sample font-family rules to use in your CSS.

Using Google's fonts this way guarantees availability, and reduces bandwidth to your own server.

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
  • Thanks for that, that was perfect. Do u know which setting google use for their playlist foonts in google play store. i want to have style exactly like that. Also i did not find the link or code snippet in the link. i do see the fonts there but no code – user26 Aug 12 '13 at 03:11
  • Can't help on the Google Play styles, I'm afraid. The `` and 'font-family' items appear at the bottom of the page with the font-weight selections on. You might need to scroll to see it. –  Aug 12 '13 at 03:16
  • 3
    Cool thing, they provide an @import for LESS files too! However, testing w/o internet connection OR Google connection issues (e.g.: China) = NO Fonts... I also noticed that there is no Roboto Black (Roboto Bk) `font-family`: they actually only use 3 font families (Roboto, Roboto Condensed and Roboto Slab) all other Roboto variants are made through `font-style` and `font-weight` CSS changes. So ideally, after placing the Google `` check if the fonts are really there. If not, use your own (btw loading all files from one font family normally does not exceed 0.5MB). – Armfoot Aug 12 '13 at 05:47
  • @Armfoot , how can i load all fonts from family – user26 Aug 13 '13 at 00:11
  • 12
    @user26 `` This loads all styles from one font-family only: Roboto. However, if you need a font family not in Google Fonts (such as **Roboto Black**) you need the files on your folders and copy the example code you have shown us in your question to your main.css (like this `@font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.` or like I suggested in my answer). – Armfoot Aug 14 '13 at 06:54
  • FYI Roboto refresh was announced during Google I/O 2014 (http://googledevelopers.blogspot.com/2014/07/the-new-roboto.html), however Google Fonts is still serving the legacy version as of Aug 16 2014. – Ray Shan Aug 16 '14 at 18:32
  • am i the only one seeing the robot font on a mac is way different then on a pc?? PC is nice and crisp but on a MAC it is bulky – alex Sep 29 '15 at 09:03
  • 34
    -1 for `Using Google's fonts this way guaranties availability`. Nothing "guaranties availability," much less Google fonts. I happen to be one of billion+ people for whom using Google's CDN means tons of websites fail to load properly, or at all. I'm not telling anyone what to do, but don't think Google's CDN is a perfect solution. – Nateowami Dec 29 '16 at 12:39
  • 5
    -1. As @Nateowami mentioned, you're relying on Google's servers (which might be blocked in certain countries), it's [bad for privacy](https://stackoverflow.com/questions/10977593/can-google-track-me-if-i-use-google-web-fonts), and performance could actually be better if you host your fonts on a CDN yourself. It's more work but that's your job, isn't it? – Robin Métral May 10 '19 at 07:16
  • 2022 EU-Update: the inclusion of Google fonts is now prohibited cause IP-addresses are considered "personal data". Be aware that including fonts via external resources may be fined by the government. – Florian Becker Nov 01 '22 at 11:58
93

There are TWO approaches that you can take to use licensed web-fonts on your pages:

1. Font Hosting Services like Typekit, Fonts.com, Fontdeck, etc.

These services provide an easy interface for designers to manage fonts purchased, and generate a link to a dynamic CSS or JavaScript file that serves up the font. Google even provides this service for free (here is an example for the Roboto font you requested).

JS font loaders like the one used by Google and Typekit (i.e. WebFont loader) provide CSS classes and callbacks to help manage the FOUT that may occur, or response timeouts when downloading the font.

<head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

2. The DIY approach

This involves getting a font licensed for web use, and (optionally) using a tool like FontSquirrel's generator (or some software) to optimize its file size. Then, a cross-browser implementation of the standard @font-face CSS property is used to enable the font(s).

This approach can provide better load performance since you have a more granular control over the characters to include and hence the file-size.

/* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

TLDR;

There are two major approches to embed custom fonts on your website. Using font hosting services along with @font-face declaration gives best output with respect to overall performance, compatibility and availability.

Source: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

UPDATE

Roboto: Google’s signature font is now open source. You can now manually generate the Roboto fonts using instructions that can be found here.

hlovdal
  • 26,565
  • 10
  • 94
  • 165
Ashesh
  • 3,499
  • 1
  • 27
  • 44
  • Can you please explain how to choose a specific font from the Roboto suite in case you've chosen to have several of them?. Because it seems that the same CSS attribute goes for all of them: font-family: 'Roboto', sans-serif; – Kosem Feb 25 '22 at 08:02
29

Old post, I know.

This is also possible using CSS @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
Bhavin Patel
  • 121
  • 2
  • 6
rocksteady
  • 2,320
  • 5
  • 24
  • 40
  • 8
    Your solution is a performance anti-pattern. Using a link tag in your markup results in sooner download of Google's CSS file compared to @import; the browser just discovers the resource reference earlier in general and in particular due to the pre-loader (while parsing the HTML vs. first parse the HTML, then discover your CSS file, then download it, then parse and discover the @import, then download the imported stylesheet). – Radko Dinev Nov 10 '16 at 12:25
  • 6
    Not necessarily. Using Webpack and plugins, this will all be embedded in your distribution build. – Spock Aug 18 '17 at 11:01
  • Add display=swap – Barney Szabolcs Oct 03 '20 at 08:07
13

With css:

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

With sass:

  @font-face
    font-family: 'Roboto'
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* https://fonts.google.com/specimen/Roboto#standard-styles */
intika
  • 8,448
  • 5
  • 36
  • 55
10

For Website you can use 'Roboto' font as below:

If you have created separate css file then put below line at the top of css file as:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Or if you don't want to create separate file then add above line in between <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

then:

html, body {
    font-family: 'Roboto', sans-serif;
}
fedorqui
  • 275,237
  • 103
  • 548
  • 598
Bhavin Patel
  • 121
  • 2
  • 6
8

The src refers directly to the font files, therefore if you place all of them on /media/fonts/roboto you should refer to them in your main.css like this: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

The .. goes one folder up, which means you're referring to the media folder if the main.css is in the /media/css folder.

You have to use ../fonts/roboto/ in all url references in the CSS (and be sure that the files are in this folder and not in subdirectories, such as roboto_black_macroman).

Basically (answering to your questions):

I have css in my media/css/main.css url. So where do i need to put that folder

You can leave it there, but be sure to use src: url('../fonts/roboto/

Do i need to extract all eot,svg etc from all sub folder and put in fonts folder

If you want to refer to those files directly (without placing the subdirectories in your CSS code), then yes.

Do i need to create css file fonts.css and include in my base template file

Not necessarily, you can just include that code in your main.css. But it's a good practice to separate fonts from your customized CSS.

Here's an example of a fonts LESS/CSS file I use:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(In this example I'm only using the ttf) Then I use @import "fonts"; in my main.less file (less is a CSS preprocessor, it makes things like this a little bit easier)

Armfoot
  • 4,663
  • 5
  • 45
  • 60
3

This is what I did to get the woff2 files I wanted for static deployment without having to use a CDN

TEMPORARILY add the cdn for the css to load the roboto fonts into index.html and let the page load. from google dev tools look at sources and expand the fonts.googleapis.com node and view the content of the css?family=Roboto:300,400,500&display=swap file and copy the content. Put this content in a css file in your assets directory.

In the css file, remove all the greek, cryllic and vietnamese stuff.

Look at the lines in this css file that are similar to:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

copy the link address and paste it in your browser, it will download the font. Put this font into your assets folder and rename it here, as well as in the css file. Do this to the other links, I had 6 unique woff2 files.

I followed the same steps for material icons.

Now go back and comment the line where you call the cdn and instead use use the new css file you created.

Post Impatica
  • 14,999
  • 9
  • 67
  • 78
3
    /* -- Roboto-Family -- */
@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-Thin.woff') format('woff'), url('./fonts/Roboto/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-ThinItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-Light.woff') format('woff'), url('./fonts/Roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-Regular.woff') format('woff'), url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-Italic.woff') format('woff'), url('./fonts/Roboto/Roboto-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-Medium.woff') format('woff'), url('./fonts/Roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-MediumItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-Bold.woff') format('woff'), url('./fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-Black.woff') format('woff'), url('./fonts/Roboto/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto/Roboto-BlackItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

/* -- Roboto-Condensed-Family -- */

@font-face {
  font-family: 'Roboto Condensed';
  src: url('./fonts/Roboto/RobotoCondensed-Bold.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('./fonts/Roboto/RobotoCondensed-BoldItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('./fonts/Roboto/RobotoCondensed-Light.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('./fonts/Roboto/RobotoCondensed-LightItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
Vijayakumar
  • 41
  • 2
2

Try this

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
Mahendra Jella
  • 5,450
  • 1
  • 33
  • 38
2

Use /fonts/ or /font/ before font type name in your CSS stylesheet. I face this error but after that its working fine.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
Mohammed Javed
  • 866
  • 2
  • 9
  • 24
1

it's easy

every folder of those you downloaded has a different kind of roboto font, means they are different fonts

example: "roboto_regular_macroman"

to use any of them:

1- extract the folder of the font you want to use

2- upload it near the css file

3- now include it in the css file

example for including the font which called "roboto_regular_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

watch for the path of the files, here i uploaded the folder called "roboto_regular_macroman" in the same folder where the css is

then you can now simply use the font by typing font-family: 'Roboto';

Omar Moustafa
  • 81
  • 6
1

It's actually quite simple. Go to the font on Google's website, and add its link to the head of every page you want to include the font.

0

Did you read the How_To_Use_Webfonts.html that's in that zip file?

After reading that, it seems that each font subfolder has an already created .css in there that you can use by including this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Barry Colebank Jr
  • 1,939
  • 2
  • 16
  • 16
0

Spent an hour, fixing the font issues.

Related answer - Below is for React.js website:

  1. Install the npm module:

    npm install --save typeface-roboto-mono

  2. import in .js file you want to use
    one of the below:

    import "typeface-roboto-mono"; // if import is supported
    require('typeface-roboto-mono') // if import is not supported

  3. For the element you can use
    one of the below:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Hope that helps.

Manohar Reddy Poreddy
  • 25,399
  • 9
  • 157
  • 140