Material-ui: [docs] Improve the font usage instructions

[bjornreppen]

Material-UI was designed with the Roboto font in mind. So be sure to include it in your project. Here are some instructions on how to do so.

The "some instructions" link is redirecting back to the fonts preview page.

[Shahrukh-Zindani]

@oliviertassinari Do you think making a readme file with instructions for including Roboto font is is a good idea? Something along the lines of a comment from this issue https://github.com/callemall/material-ui/issues/4819

[robcaldecott]

You can do this very easily now:

npm install typeface-roboto --save

Then, in your index.js:

import 'typeface-roboto'

Works with webpack/create-react-app.

More info on the typeface project.

[oliviertassinari]

We are documenting it on the next branch:

• live
• source

@Shahrukh-Zindani Regarding going forward I think that we should

• Linking the docs source in the README
• Improve the typography page with some alternatives
  
  
  
  • https://fonts.google.com/?selection.family=Roboto:300,400,500
  
  
  • typeface-roboto
  
  

[oliviertassinari]

The "some instructions" link is redirecting back to the fonts preview page.

@Mashi From what I can see the link isn't broken. Sure we have 2 redirections that we remove but the font is selected, you have the instruction with one extra click.

[Shahrukh-Zindani]

@oliviertassinari Do you mean that we should give links to other alternative Google Fonts like Amiko, Baloo etc. Similar to this link <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> ?
Where do you think we need to add a link to the docs source? I can add a link to the docs source to all the readmes and make PRs.

[oliviertassinari]

@Shahrukh-Zindani No, the Roboto font is the only one we should consider, what I mean by alternative, is alternative implementations.
I'm saying that for two reasons:

1. Simplicity: It's one of the first things any new users is going to ask himself about.
   How to get the font? Having it under a Getting started section sounds appropriate
2. DRY: I think that we should link it in order to avoid code duplication.

[Shahrukh-Zindani]

PR #6266 has been made to address the issue.

[grigored]

import 'typeface-roboto' should be discouraged as (at least in my webpack configuration) it greatly increases the bundle size (from 400kb gziped to about 1.6mb gzipped) and does not take advantage of caching (most users probably already have roboto cached in their browser).

[oliviertassinari]

import 'typeface-roboto' should be discouraged

@grigored typeface is the go to solution for Gatsby. I have some doubt about your statement.

[robcaldecott]

With create-react-app it gets bundled as separate assets so I don't think this is an issue. Not everyone is in a position to use an external CDN.

[oliviertassinari]

I would encourage people to give a read at https://www.zachleat.com/web/comprehensive-webfonts/ for a better understanding of the tradeoff.

[grigored]

@oliviertassinari That's a long read, and I didn't quite get the point after quickly going through it.
@robcaldecott If you don't have access to a CDN, you can of course host Roboto on your server and link to it instead of the CDN. I didn't use create-react-app, so in my case Roboto was included in the same bundle. My bundle gets updated every few days, so I definitely want Roboto separate so it can be cached better.

I analyzed my bundle using http://chrisbateman.github.io/webpack-visualizer/, and turns out all variants of Roboto (100/300/400/500/700/900, italic/regular, SVG/woff) are included in the bundle, so maybe there's where the 1MB (or 250%) difference comes from.

Maybe the tradeoffs should be better explained in the docs, so that other folks don't do the mistake i did. I can submit a PR for this, but still not sure what are the advantages of using import.