[React] 웹 폰트 & 아이콘 적용하기

Font Awesome 아이콘 사용

웹 개발하며 아이콘이 필요한 경우 Font Awesome을 많이 사용합니다.

패키지 설치

npm i @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core (필수)

아이콘 묶음 패키지 (추가 설치)
@fortawesome/free-solid-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/free-brands-svg-icons

✔ @fortawesome/react-fontawesome
  Font Awesome을 React 컴포넌트 형태로 사용할 수 있도록 하는 패키지
✔ @fortawesome/fontawesome-svg-core
  SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지

React Component로 사용

import { faCamera } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";


export default function App() {
  return (
    <div className="App">
      <header className="App-header">
        <FontAwesomeIcon icon={faCamera} size="2x" />
      </header>
    </div>
  );
}

폰트 적용

웹폰트가 설치되어 있지 않다면 다운을 받아야 하는데 웹페이지의 용량이 무거워지고 성능 저하 문제
웹 폰트 이슈

웹폰트 경량화

서브셋 폰트(Subset Font)

폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트.

• IE6-IE8 opentype
• Super Modern Browsers woff2
• Modern Browsers woff
• Safari, Android, iOS ttf

✔ css 파일에 적용
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 300;
  src: url("../src/fonts/NanumGothicLight.woff2") format('woff2'),
  url("../src/fonts/NanumGothicLight.woff") format('woff'),
  url("../src/fonts/NanumGothicLight.otf") format('otf')
}

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: normal;
  src: url("../src/fonts/NanumGothic.woff2") format('woff2'),
  url("../src/fonts/NanumGothic.woff") format('woff'),
  url("../src/fonts/NanumGothic.otf") format('otf')
}

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: bold;
  src: url("../src/fonts/NanumGothicBold.woff2") format('woff2'),
  url("../src/fonts/NanumGothicBold.woff") format('woff'),
  url("../src/fonts/NanumGothicBold.otf") format('truetype')
}

(+) font-weight
300 - Light
400 - Normal
700 - Bold
800 - Extra Bold (Ultra Bold)

📗 Reference

render-blocking-css
Font Awesome Demo
React에서 Font Awesome 사용하기
한글 웹 폰트 경량화해 사용하기
나눔고딕 경량화 웹폰트