react로 작성하고 있는 웹사이트에서 세련된 폰트를 사용하고 싶고 구현해 보았습니다.
material ui를 사용하는 전제가되기 때문에 그건 나쁘지 않습니다.

환경:
Rea ct @ 16.8.6
@material-ui/이 @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을 가져옵니다.

제 경우에는 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의 테마를 앱에 적용

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로 지정한 문자 밖에 적용되지 않는다.
단지

나

등의 태그로 지정한 텍스트에는 효과가 없기 때문에 주의가 필요합니다.