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

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

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.

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

3. Add the Font to your index.html file

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