Material-ui: 사용자 정의 글꼴 변경/사용

http://www.material-ui.com/#/customization/themes

실제로 6시간 동안 온라인에서 검색하고 lib 코드를 파헤치고 무작위로 추측한 후 내가 도달한 결론은 다음과 같습니다. IT IS POSIBLE! :디

1. /public에 /font 디렉토리 생성
2. @font-faces를 정의하는 /public/fonts/fonts.css 생성:

@font-face {
  font-family: 'inglobal';
  font-weight: normal;
  font-style: normal;
  src: url('./inglobal.ttf');
}

1. <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> 를 /public/index.html의 헤드에 추가

2. 만세!

4/나. 어떤 이유로든 여전히 작동하지 않으면 글꼴 확장자를 .css( src: url('./OperatorMono.css') 에서도)로 변경하십시오.

1. index.html에 Google 글꼴을 연결하세요.
   <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">

2. 당신의 바디 스타일에 추가
   /* Styles */ body { margin: 0 auto; font-family: 'Montserrat'; }

3. app.js의 몇 가지 변경 사항
   import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({ typography: { fontFamily: [ 'Montserrat' ].join(','), }, })

/public/index.html


나를 위해 일했습니다 :)

실제로 6시간 동안 온라인에서 검색하고 lib 코드를 파헤치고 무작위로 추측한 후 내가 도달한 결론은 다음과 같습니다. IT IS POSIBLE! :디

1. /public에 /font 디렉토리 생성
2. @font-faces를 정의하는 /public/fonts/fonts.css 생성:

@font-face {
  font-family: 'inglobal';
  font-weight: normal;
  font-style: normal;
  src: url('./inglobal.ttf');
}

1. <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> 를 /public/index.html의 헤드에 추가
2. 만세!

4/나. 어떤 이유로든 여전히 작동하지 않으면 글꼴 확장자를 .css( src: url('./OperatorMono.css') 에서도)로 변경하십시오.

일이야!! 감사합니다.

기본 글꼴을 변경하려면 다음 2단계를 따르십시오.

여기에서 기본 글꼴을 "Open Sans"로 변경하겠습니다.

1. index.html에서 Google 글꼴 가져오기
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"/>

2. index.js에서 이러한 변경을 수행하십시오.

import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({ typography: { fontFamily: [ 'Open Sans' ].join(','), }, })

ReactDOM.render(
        <ThemeProvider theme={theme}>
                        <CssBaseline />
            <App />
        </ThemeProvider>,
    document.getElementById('root')
);

_구성 중에 시퀀스가 ​​중요한 경우가 있습니다. createMuiTheme 에서 구성하는 동안 항상 최상위 수준에서 타이포그래피를 정의하는 것이 좋습니다.

문제:

구성 테마에 글꼴 모음이 표시되지 않는 경우

// Create a theme instance.
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#2991d6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  }, typography: {
    fontFamily: "VarelaRound,sans-serif",
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [varelaRound],
      },
    },
  },
});

Note: In this case Material UI using Roboto as the default font

해결책:

// Create a theme instance.
const theme = createMuiTheme({
  typography: {
    fontFamily: "VarelaRound,sans-serif",
  },
  palette: {
    primary: {
      main: "#2991d6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [varelaRound],
      },
    },
  },
});

나는 순서를 변경하고 모든 것이 잘 작동합니다.