Vite+React - 폰트 설치하기

1. 무료 폰트사이트에서 폰트 다운 받기

https://noonnu.cc/

눈누

2. ttf 파일을 프로젝트에 저장하기

3. @font-face를 global css 적용하는 곳에 작성하기

import { css } from '@emotion/react'
import { Theme } from './Theme'

const GlobalStyle = (theme: Theme) => css`
  @font-face {
    font-family: 'Murukmuruk';
    src: url('src/assets/fonts/KCC-Murukmuruk.ttf');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'BMJUA';
    src: url('src/assets/fonts/BMJUA.ttf');
    font-weight: lighter;
    font-style: normal;
  }
 
 ...
 
  body {
    font-family: 'BMJUA';
    background-color: ${theme.bgColor};
    color: ${theme.fontColor};
  }
 
`

export default GlobalStyle

- 현재 body에 font-family로 사용했다

4. 폰트가 적용됐는지 확인하기!