🚩 TODO
- 나눔고딕 폰트 적용하기
💡 한글 폰트가 필요하다
내가 적용한 템플릿 gatsby-starter-blog는 국내에서 만들어졌기에 한글폰트가 적용되어 있지 않다. 그렇다고 영문 폰트가 예쁜가? 개인적으로는 아니였다.
👩🏻💻 Fontsource를 이용하여 구글 폰트 적용하기
공식문서에서 font에 대한 글 중 web font파트를 잘 읽어보면
Fontsource는 구글 폰트를 NPM패키지로 제공해준다고 써있다. 예제를 들어 사용법도 친절히 알려주고 있다.
지원하는 폰트는 NPM사이트나 fontsource사이트를 통해 고를 수 있다. 나는 나눔고딕을 택했다.
✤ 고른 폰트 적용하기
// 1. 터미널에 아래 명령어를 입력하여 원하는 폰트를 설치한다
yarn add @fontsource/폰트명
//혹은
npm install @fontsource/폰트명
// 2. 설치한 패키지를 가져온다.
// 공식문서에서는 gatsby-browser.js파일에서 가져오기를 권장
import "@fontsource/nanum-gothic"// 3. 폰트 적용
body {
font-family: "nanum-gothic";
}굉장히 쉬운 방법으로 폰트를 적용할 수 있다!