Menu
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 on Google servers and fonts also work offline ?
The installation page just references the Google fonts page, but that obviously forces fonts to be downloaded from Google servers.
A similar Material UI Issue exists regarding Roboto font, but still relies on Google providing the font files.
I found a NPM package providing the Roboto font files, but I'm not sure how to include those files as lots of styles and font formats are provided and I don't know what styles Material UI really needs. Also, importing those font families simply via @import seems to have performance issues.
So, what is a good and simple solution to bundle the right Roboto files with my application?
243
To change the font family of all React Material UI components, we can call the createTheme function provided by Material UI to set the font styles for the theme. Then we apply the theme with ThemeProvider to apply the styles to the whole app.
To self-host fonts, download the font files in ttf , woff , and/or woff2 formats and import them into your code. ⚠️ This requires that you have a plugin or loader in your build process that can handle loading ttf , woff , and woff2 files.
For Windows, first unzip the Roboto font folder. Next, head to the Start Menu and open the Settings page. From here, click the Personlization option, then Fonts. Next, drag the extracted fonts onto the installer window.
You can also do it like it is documented in this issue: https://github.com/callemall/material-ui/issues/6256
npm install typeface-roboto --save Then, in your index.js:
import 'typeface-roboto' Works with webpack/create-react-app.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
