React font 적용 - otf file format: otf(x) opentype(o)

로컬에 있는 폰트 파일을 가져다 쓰는 방식으로 적용해 보겠습니다.

브라우저 별로 otf, ttf, woff 등 다양한 형식의 폰트 파일이 필요합니다. 필요한 만큼 준비합니다.

font.css에는 아래와 같이 작성했습니다.

/*
  src: 사용할 폰트의 위치 및 형식
     Safari, Android, iOS => ttf
     Modern Browsers => woff
     IE6-IE8 => eot
  */
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 400;
  font-style: normal;
  src: url('./NotoSansKR-Medium.otf') format('opentype'),
    url('./NotoSansKR-Bold.woff') format('woff');
}

font-family에 원하는 이름을 지정합니다.

⭐format('otf '가 아니라 'opentype')!!!!!!

otf 파일에는 format에 'opentype'을 지정해 줘야 합니다. 다른 블로그에 'otf'로 되어 있는 곳이 많아서 꽤나 삽질했습니다.

이후, index.js에서 font.css를 import했습니다. 그리고 폰트가 필요한 컴포넌트에 아래와 같이 불러옵니다.

.formHeader {
    /* font-weight: bold; */
    font-family: 'Noto Sans KR';
}

적용 전

적용 후

잘 적용되는 모습입니다.