Google fontsをMaterial ui と一緒にReactで使いたい！

reactで作成しているウェブサイトでおしゃれなフォントを使いたいと思って実装してみました。
material ui を使う前提になるのでそこは悪しからず

環境：
　react@16.8.6
　@material-ui/core@4.1.1

↓Google fonts適用前はこんな感じ↓

↓適用後はこんな感じです↓

おしゃれさがぐんとアップしました。

#styled-componentsをインストール

$npm install --save styled-components

#grobalStyles.js のファイルを作成する
場所はどこでもいいです。自分がわかりやすいような場所に作ってください。
因みに私は、componentsやcontainerがあるフォルダと同じ階層にフォルダを作り、
その中にgrobalStyles.js　というファイルを作っています。

#作ったファイルで「createGlobalStyle」をインポート

grobalStyles.js

import {　createGlobalStyle } from 'styled-components';

続いて、このようにかっこでくくる

createGlobalStyle``

#google fontsからとってきたurlを貼り付ける
urlの見つけ方は、好きなフォントを見つけたあと、プラスマークをクリックして、ページ下部に表示されたFamily selectedを開く

urlを追加したコード↓

grobalStyles.js

import {　createGlobalStyle } from 'styled-components';

export default createGlobalStyle`@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap");
`

#componentsの中の親元のファイルでGlobalStyleをimportする
私の場合は、App.jsに書きました。

components/App.js

import GlobalStyle from "../materialui/grobalStyles";

const App = () => (
  <div>
    <GlobalStyle />
  </div>
);

export default App;

#material uiのthemeにてGoogleFontを指定する

theme.js

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

export const theme = createMuiTheme({
  typography: {
    "fontFamily": "\"Ubuntu Condensed\", \"sans-serif\"",
  },
})

#material uiのthemeをアプリに適用する
index.jsに theme を import して、MuiThemeProvider を追加する

追加前のindex.js

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

追加後のindex.js

import { theme } from "./materialui/theme";
import { MuiThemeProvider } from "@material-ui/core/styles";

render(
  <MuiThemeProvider theme={theme}>
    <Provider store={store}>
      <App />
    </Provider>
  </MuiThemeProvider>,
  document.getElementById("root")
);

一番上の階層のindex.jsに書いてます↑

これでお好みのフォントが適用されるはずです！

注意点：
この記事はmaterial uiがあることを前提としているので、
このコードの書き方だとmaterial ui のtypographyで指定した文字しか適用されない。
ただの＜h２＞や＜h2＞などのタグで指定したテキストには効かないので注意が必要です。