How to add roboto-fontface

sage
1

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 roots.io 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": [
        "./css/roboto-fontface.less",
        "./fonts/*"
      ]
   }

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.

4 Likes
2

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