How to include Roboto font in webpack build for Material UI?

Question

For a progressive web app based on Material UI (React) and built with Webpack, how do I properly include Roboto font(s) so that the app does not depend

Answer 1

I tried installing typeface-roboto with npm but it didn't work. Also, using CDN from material ui didn't work. But, installing webfontloader with npm worked. Here is the solution, First,

npm install webfontloader --save

Then, import WebFont from webfontloader in your entry.js file for example App.js or index.js

import WebFont from "webfontloader";
WebFont.load({google: {families: ["Roboto:300,400,500"]}});