Using Font or Font family consistently in a Material-UI application

11270

Roboto is the default font in material UI. If we want to change robot to some other font and use that new font consistently throughout the application we can achieve that by modifying the global theme object. The following are the steps we need to do to modify the global theme object.

1. Create a theme.js file to keep the overrides

Following is the content goes into theme.js file

import { red } from '@material-ui/core/colors';
import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
import pink from '@material-ui/core/colors/pink';


// A custom theme for this app
const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: pink,
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
  typography: {
    fontFamily: "Hind", // specifying a new font
  },
  overrides: {
    MUIDataTable: {
      responsiveScroll: {
      maxHeight: '980px'
      }
  }}
});

export default theme;

The above example shows overriding different parameters like palette typography etc., Instead of a single Font if you want to use a Font family you can pass a list of fonts to fontFamily like following.

  typography: {
    fontFamily: "-apple-system,Hind", // specifying a new font
  },

2. use ThemeProvider to use the custom theme

In your main index.js file use the following code to wrap your material UI application with ThemeProvider

import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/styles';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Dashboard from './Dashboard';
import LoginPage from './LoginPage.jsx';
import theme from './theme';



ReactDOM.render(
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <BrowserRouter basename="/">
        <Switch>
          <Route exact path='/' component={LoginPage} />
          <Route exact path='/dashboard' component={Dashboard} />
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  , document.querySelector('#root'),
);

3. Add the Font to your index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Title</title>
    <!-- New Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Hind:300,400,600" rel="stylesheet">
    <!-- Fonts to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

With the above changes now your medical your application uses font Hind consistently everywhere in your application