Gatsby에서 폰트를 바꿔보자 (With Gatsby-Starter-Bee)

블로그를 보다가…

뭔가 한글이 좀 이상하게 보이는 느낌이 들었다.
너무 두껍고 가독성이 떨어진달까나?

그래서 폰트를 바꿔보려고 찾아봤다. 먼저 내가 쓰는 블로그 템플릿은 Gatsby-Starter-Bee이거를 쓰고 있다.
그리고 Node 버전은 이 블로그 구동을 위해 14.15.0으로 설정했다.

1. 폰트를 구해보자

이 블로그 템플릿은 typeface를 사용한 거 같은데 이거를 찾아보니 Deprecated 되었다.
Github 참고

그리고 이것을 대신할 것이 fontsource이다.
더 자세한 정보는 FontSource 깃허브공홈 을 참조하자.

무튼…나는 처음에 네이버의 나눔 고딕 폰트를 추가해봤지만…영 별로였다.
그래서 이것저것 찾다가 구글 폰트가 괜찮다 해서 해당 폰트를 찾게 되었다.

일단 적용을 위해 설치를 해준다.

npm install @fontsource/noto-sans-kr

이렇게 설치를 하고 난 뒤에 몇 가지 설정을 해줘야 한다.

2. 폰트 설정해주기

아래의 순서로 하나씩 해준다.

2-1 gatsby-browser.js

상단에 커스텀 폰트를 추가한다.

// custom typefaces
require('@fontsource/noto-sans-kr') //추가
require('@fontsource/noto-sans-kr/700.css') //추가

//아래는 기존 것
require('typeface-catamaran')

// polyfill
require('intersection-observer')

const metaConfig = require('./gatsby-meta-config')

typography.js

기존에는 GitHubTheme를 오버라이딩 해서 쓰는데 밑에 몇가지 설정을 추가해준다.

GitHubTheme.overrideThemeStyles = () => {
  return {
    //... 기존 코드
  }
}

//신규 코드
GitHubTheme.baseFontSize = '20px' //폰트 크기
GitHubTheme.baseLineHeight = 1.666 //가로 사이즈?
GitHubTheme.scaleRatio = 2.0
GitHubTheme.headerWeight = 700
GitHubTheme.headerFontFamily = ['Noto Sans KR']
GitHubTheme.bodyWeight = 100 //이게 너무 높으면 볼드체 된다.
GitHubTheme.boldWeight = 700
GitHubTheme.bodyFontFamily = ['Noto Sans KR']

//아래는 기존 코드
const typography = new Typography(GitHubTheme)

여기는 입맛에 맞게 설정하면 되는데 위는 샘플이다.

이렇게 설정하면 글 폰트 보는게 한결 나아진다.
기분탓일 수도 있는데 난 가독성이 좀 올라간거 같아서 마음에 든다.


참고


Written by@MHLab
로또는 흑우집합소 🎲
와인관리, 시음노트, 셀러관리는 마와셀 🥂

🫥 My Service|  📜 Contact|  💻 GitHub