How to include Roboto font in webpack build for Material UI?
<p>For a <em>progressive</em> web app based on <a href="http://www.material-ui.com/" rel="noreferrer">Material UI</a> (React) and built with <strong>Webpack</strong>, how do I properly include Roboto font(s) so that the app does not depend on Google servers and fonts also work <em>offline</em> ?</p>

<ul>
<li><p>The <a href="http://www.material-ui.com/#/get-started/installation" rel="noreferrer">installation page</a> just references the <a href="http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500" rel="noreferrer">Google fonts page</a>, but that obviously forces fonts to be downloaded from Google servers.</p></li>
<li><p>A similar <a href="https://github.com/callemall/material-ui/issues/4819" rel="noreferrer">Material UI Issue</a> exists regarding Roboto font, but still relies on Google providing the font files.</p></li>
<li><p>I found a <a href="https://www.npmjs.com/package/roboto-fontface" rel="noreferrer">NPM package providing the Roboto font files</a>, but I'm not sure how to include those files as lots of styles and font formats are provided and <strong>I don't know what styles Material UI really needs</strong>. Also, importing those font families simply via @import seems to have <a href="https://github.com/callemall/material-ui/issues/104#issue-50455732" rel="noreferrer">performance issues</a>.</p></li>
</ul>

<p>So, what is a good and simple solution to bundle the <em>right</em> Roboto files with my application?</p>