Remove Roboto font import

[DimitryDushkin]

Hey! Great project!

Just want to mention, that it's not good for performance to load font via @import in CSS. So it will be good to exclude this line — https://github.com/callemall/material-ui/blob/master/src/less/variables/custom-variables.less#L5
and add loading via webfont, like this:

  WebFontConfig = {
    google: { families: [ 'Roboto:400,500:latin,cyrillic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

[gpbl]

I'm also for keeping the import out of the CSS. Developers may also skip the import on browsers that have it already installed.

[hai-cea]

We may want to wait until the next minor release since this will be a breaking change. Also, it would be good to add some documentation to let users know they need to add this to their project along with the react-tap-event-plugin mentioned in #111.

[gpbl]

Anyway, using @import to load an external resource should not include the http: part, otherwise browsers would display a security warning:

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

[oliverwoodings]

+1 to this for a totally different reason:

@import statements are synchronous and blocking. If for some reason Google Fonts is not reachable, the entire page will get blocked, an example being if you are building an offline app. At the moment there is no way to stop that import statement happening - I had to fork the repo and remove it so I could use it in my latest project.