Material-ui: カスタムフォントの変更/使用

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

実際、オンラインで6時間検索し、libコードを掘り下げてランダムに推測した後、私が到達した結論は次のとおりです。それは可能です。 ：D

1. / publicに/ fontsディレクトリを作成します
2. @ font-facesを定義する/public/fonts/fonts.cssを作成します。

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

1. /public/index.htmlの頭に<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">を追加します

2. やあ！

4 / b。 それでも機能しない場合は、フォントの拡張子を.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コードを掘り下げてランダムに推測した後、私が到達した結論は次のとおりです。それは可能です。 ：D

1. / publicに/ fontsディレクトリを作成します
2. @ font-facesを定義する/public/fonts/fonts.cssを作成します。

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

1. /public/index.htmlの頭に<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">を追加します
2. やあ！

4 / b。 それでも機能しない場合は、フォントの拡張子を.cssに変更します（これもsrc: url('./OperatorMono.css')にあります）。

仕事です!! ありがとう。

デフォルトのフォントを変更するには、次の2つの手順に従います。

ここでは、デフォルトのフォントを「OpenSans」に変更しています

1. index.htmlにGoogleFontsをインポートします
   <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],
      },
    },
  },
});

シーケンスを変更するだけで、すべてが正常に機能します。