Typeface-roboto for what?

user_366759 0
Viewed 1362

Given the react code bellow:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import 'typeface-roboto';
import Typography from '@material-ui/core/Typography';

const App = class extends Component {
  render() {
    return <Typography variant="h1">Hello React App!</Typography>;
  }
}

const root = document.getElementById('root');

ReactDOM.render(<App />, root);

if I comment import 'typeface-roboto'; nothing changes in my application.

Could someone explain me why?

sandbox: https://codesandbox.io/s/x2n59kj2lq

material-ui reactjs
3 Answers

The package ‘typeface-roboto’ is used to import the roboto font, it includes all necessary font filesand a CSS file.It's only required when you want to change your font.And,typeface-roboto assumes that you use webpack to process CSS and file.

user_95617840

MUI Typography component sets the font family as 

font-family: "Roboto", "Helvetica", "Arial", sans-serif;

When you import typeface-roboto you make "Roboto" available to the app and the css and font files are bundled with your app.

If you comment out import 'typeface-roboto'; then the "Roboto" font is no longer bundled and available in your app.

In the codesandbox you provided you can inspect the h1 title and see font-family: Roboto,Helvetica Neue,Arial,sans-serif;

The important thing to note is that there is a very faint underline below the Helvetica Neue that means that the Roboto font is not available so Helvetica Neueis being used.

If you import Roboto you will see that Roboto is now underlined.

When you comment out import 'typeface-roboto'; it may look like everything is the same in your app but this is because the fallback font in the font-stack is very similar to Roboto.

Material-ui is not loading Roboto as they say in their docs it is only made available by the import statement but unless you have a sharp eye or see which font in underlined in the font-stack you might think your looking at Roboto when in fact its Helvetica.

user_14374830

Dont forget that such import module type means just importing a script in es6 so which in this case is a css script for font

user_74475530
Related