Overwrite Material UI 5.0 typography theme globally with custom fonts

user_17682036 0
Viewed 2866

I'm attempting to use two personal fonts in Material Ui 5.0 at the moment. I'd like to apply them globally by overwriting the theme. My first issue is that I can't get the fonts to even load properly, and I can't change the typography at all. Furthermore, with MUI 5.0, I am unable to have this custom font applied to the full body section. So if use <Typography variant='h4'>. or <Box>...</Box> my custom fonts are not applying. They way I did the global overwrite in Mui 4.0 is not working anymore in version 5. I'm very annoyed because the MUI 5.0 documentation does not properly or at all explain this, and I have been sitting there for hours.

I would appreciate any help !

I am using React, Typescript.

font.d.ts

 declare module '*.woff'
 declare module '*.ttf'

cssBaseLine.ts

import CustomOneMediumWoff from '../fonts/CustomOne-Medium.woff'
import CustomOneTwomWoff from '../fonts/CustomOne-Twom.woff'

    export const CssBaseline = {
        MuiCssBaseline: {
          
            // '@global': {
            //     html: {
            //       fontFamily: 'CustomOneTwomWoff',
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //     body: {
            //       fontFamily: 'CustomOneTwomWoff',
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //     '#root': {
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //   },
    
        // I did that in MUI 4.0 and it does not work anymore
      // Tho documentation is not explaining the global overwirte part anymore
    
        styleOverrides: `
        @font-face {
            font-family: "CustomOne";
            url(${CustomOneMediumWoff}) format("woff"),
            font-weight: 500;
            font-style: normal;
          }, 
    
          @font-face {
            font-family: "CustomTwo";
            url(${CustomTwoMediumWoff}) format("woff"),
            font-weight: 500;
            font-style: normal;
          }, 
    
      `,
      },
    }
    
    export default CssBaseline

typography.ts fonts are not applying

export const typography = {
  fontFamily: ['CustomOne', 'CustomtTwo'].join(','),
  h1: {
    fontFamily: 'CustomOne',
    fontWeight: 500,
  },
  h2: {
    fontFamily: 'CustomOne',
  },
  h3: {
    fontFamily: 'CustomOne',
  },
  h4: {
    fontFamily: 'CustomOne',
  },
  button: {
    fontFamily: 'CustomtTwo',
  },
}

export default typography

theme.ts

export const theme = createTheme({
  palette:palette,
  typography: typography,
  components: {
    ...CssBaseline,
  },
})

export default theme

Does not work and default browser fonts are loaded

     <Typography variant='h4'>Test 4</Typography>
     <Box mt={4}>test Boxssssss H</Box>

App.tsx

 <ThemeProvider theme={theme}>
      <CssBaseline />
....
material-ui typescript reactjs
3 Answers

I'm not seeing any obvious problem with the code in your question, but here is a working example:

import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import InspirationTTF from "./Inspiration-Regular.ttf";

const theme = createTheme({
  typography: {
    fontFamily: "Inspiration"
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        "@font-face": {
          fontFamily: "Inspiration",
          src: `url(${InspirationTTF}) format("truetype")`
        },
        body: {
          fontSize: "3rem",
          color: "purple"
        }
      }
    }
  }
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Typography variant="h1">Hello World</Typography>
      <div>Some body text</div>
    </ThemeProvider>
  );
}

Edit custom font-family

Related answer: how to apply global backgroundColor using MuiCssBaseline and styleOverrides

user_74959300

Make sure you are importing createTheme and ThemeProvider from '@mui/material/styles'.

user_86901510

This seem to work for me

index.html

<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600@1&display=swap" rel="stylesheet"/>

..

let theme = createTheme({
  typography: {
    serif: {
      fontFamily: '"Lora", serif',
    },
  },
});

...

<Link to="/"
 component={RouterLink} 
 variant="serif"
>
Text
</Link>
user_34875790
Related