CODEWITHSUNDEEP
cssreactjstypescriptwebpackmaterial-ui
gwrik09
gwrik09

Reputation: 191

How to use google fonts properly as material ui custom theme typography in React/TypeScript?

Hi I'm trying to use Google fonts in custom Material UI theme as a global font but font-weight does not working. It just shows normal font-weight size which is 400. When I import bold of another font file (like Roboto-bold.woff2), write code properly for the bold font, then it works as just bold, only medium font weight does not work here. Here is my code.

import { createMuiTheme } from '@material-ui/core';
import RobotoReg from '../font/Roboto-Regular.woff2';
import RobotoMed from '../font/Roboto-Medium.woff2';

const robotoReg: any = {
  fontFamily: 'Roboto',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Roboto-Regular'),
    url(${RobotoReg}) format('woff2')
  `,
};

const robotoMed: any = {
  fontFamily: 'Roboto',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Roboto-Medium'),
    url(${RoboroMed}) format('woff2')
  `,
};

const theme = createMuiTheme({
  typography: {
    fontFamily: ['Roboto', 'sans-serif',].join(','),
    htmlFontSize: 16,
    fontSize: 16,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
 },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [robotoReg, robotoMed],
      },
    },
  },
});

...

The google font works well as a global font but font-weight: 500; does not work. Does anyone have a same problem? I'd appreciate if I could have your help! Thanks in advance.

Upvotes: 1

Views: 1225

Answers (1)

jdunk
jdunk

Reputation: 2838

Probably far too late now, but for what it's worth: you've got a typo in your code: RoboroMed should be RobotoMed.

Upvotes: 1

Related Questions