What is Material UI?
Material UI is a React component library for building web interfaces faster and with ease. It features a large set of commonly used UI components so that developers can focus on adding functionality to applications instead of spending so much time on UI implementation. It makes use of principles from the material design guide created by Google, and with over 59k stars and 1,800 contributors on GitHub, it is one of the most loved UI libraries for React developers.
How to get started with Material UI
This article assumes that you’ll be using create-react-app or any of the other React toolchains. If you’ll be setting up your own toolchain and build pipeline, be sure to include a plugin or loader for loading fonts.
To get started, install create-react-app:
/ with npm npx create-react-app font-app //with yarn yarn create-react-app font-app
To use material UI in your application, install it via npm or yarn:
// with npm npm install @material-ui/core // with yarn yarn add @material-ui/core
Then, add some UI components to work within App.js:
import React from 'react';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import './App.css';
function App() {
return (
<div className="App">
<div>
<Typography variant="h2" gutterBottom>
Welcome to React
</Typography>
<Button variant="contained" color="secondary">Ready To Go</Button>
</div>
</div>
);
}
export default App;
Using your browser’s inspector to inspect the button and header, you’ll see that they’re rendered using the default font family of Roboto. So, how do we change that?
How to add custom fonts to your Material UI project
Below, we’ll go through three different ways to add any font of your choice to your Material UI project.
Method 1: Use Google Fonts CDN
Head over to Google Fonts and select a font-family of your choice. I’ll be using the Chilanka Cursive font. Copy the CDN link and add it to the <head> of the public/index.html file:
<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
To be able to use the fonts, you’ll have to initialize it using the CreateMuiTheme which is an API provided by Material UI that generates a custom theme based on the options received and ThemeProvider which is a component used to inject custom themes into your application.
Add this to your App.js file:
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
typography: {
fontFamily: [
'Chilanka',
'cursive',
].join(','),
},});
Then wrap your components with the default Material UI ThemeProvider component, passing into it a theme props. The value of the theme props should be the name of your defined theme:
<ThemeProvider theme={theme}>
<div className="App">
<div>
<Typography variant="h2" gutterBottom>
Welcome to React
</Typography>
<Button variant="contained" color="secondary">Ready To Go</Button>
</div>
</div>
</ThemeProvider>
Inspecting the components now with the browser inspector tool, you’ll find that the font family has changed to Chilanka.
Method 2: Self host fonts using google-webfonts-helper
There are some benefits of self-hosting your fonts. It is significantly faster and your fonts load offline.
Google-webfonts-helper is an amazing tool that makes self-hosting fonts hassle-free. It provides font files and font-face declarations based on the fonts, charsets, styles, and browser support you select.
Simply search for any google-font on it and select the desired font weights. I’ll be using Josefin-sans.
Copy the resulting font-face declarations into src/index.css file. You can customize the font file location — the default assumes ../fonts/. We’ll be using ./fonts cos we’ll be placing downloaded fonts in the src/fonts directory.
Finally, download your files. Unzip them, and place them in your project, in the appropriate location src/fonts
Like before, you’ll have to define the font-family using the CreateMuiTheme and wrap your components with the ThemeProvider component:
const theme = createMuiTheme({
typography: {
fontFamily: [
'Josefin Sans',
'sans-serif',
].join(','),
},});
Inspecting now, you should see that the font family has changed to Josefin Sans.
Method 3: Self host fonts using the Typefaces NPM packages
Typefaces is a collection of NPM packages for google-fonts and some other open-source typefaces created by Kyle Matthews. Fonts, just like other dependencies, can be added to a project by installing it with NPM.
This is my favorite method because all web(site|app) dependencies should be managed through NPM whenever possible.
Simply search through the repo for your choice of typeface and click on the font folder to find the necessary npm installation command. I’ll go with Cormorant:
npm install typeface-cormorant
Then, import the package into your project’s entry file – src/index.js in our case:
import "typeface-cormorant";
Also, like before, you’ll have to define your font-family using the CreateMuiTheme and wrap your components with the Themeprovider component:
const theme = createMuiTheme({
typography: {
fontFamily: [
'Cormorant',
'serif',
].join(','),
},});
Inspecting now, you’ll see that the font family has changed to Cormorant.
Bonus
What if you want to define different fonts for our header and button. Say a primary font and a secondary font?
All you need to do is define two theme constants and wrap the intended components with the Themeprovider component, each with a theme prop of the corresponding font.
For example, if you want to use the Cormorant font for the heading and Josefin-sans for the button, you’ll first define two themes for the Cormorant and Josefin-sans fonts respectively:
const headingFont = createMuiTheme({
typography: {
fontFamily: [
'Cormorant',
'serif',
].join(','),
},});
const buttonFont = createMuiTheme({
typography: {
fontFamily: [
'Josefin Sans',
'sans-serif',
].join(','),
},});
Then, wrap target components with a ThemeProvider component of the required font like below:
function App() {
return (
<div className="App">
<div>
<ThemeProvider theme={headingFont}>
<Typography variant="h2" gutterBottom>
Welcome to React
</Typography>
</ThemeProvider>
<ThemeProvider theme={buttonFont}>
<Button variant="contained" color="secondary">
Ready To Go
</Button>
</ThemeProvider>
</div>
</div>
);
}
And Viola! You’ll see now that the heading is rendered with the Cormorant font and the button with the Josefin Sans font.
Conclusion
In this article, we covered three ways to add custom fonts to a Material UI project without much hassle. We also looked at how to define separate fonts for different components. I hope reading this has helped answer whatever questions you had on the topic.
Now, go on and build something great!
Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
https://logrocket.com/signup/LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — Start monitoring for free.
What version of Material UI are you using in this blog post?
Version ^4.11.0