How to add roboto-fontface

Hi all,
after hours of trials I finally accomplished to add roboto-fontface to my Sage theme in what I think is the “correct” way.
First of all, my sources of knowledge: this post about bower overrides in the blog, and this discussion here.

So here are the steps:

  1. Install the roboto-fontface bower-component with bower install roboto-fontface --save
    What happens?
    Bower installs the component inside bower_components/roboto-fontface in your theme folder and wiredep add the new component to your dependencies. It also injects the roboto-fontface less file in your main.less file.
  2. To be more secure it will work add to your overrides in your main bower.json:
    "roboto-fontface": {
      "main": [

In this way it will add the fonts from roboto-fontface package to your dist/fonts folder (although I don’t understand already how I recognize where to put the fonts)
3. in your main.less file, add your code, for example:

.p {
  font-family: 'Roboto';
  font-weight: 300;

then compile with gulp build or gulp styles.

Hope this will help someone.


It is the same font than “Google font Roboto” use with Android too?