📜

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

2023.01.10

블로그를 보다가…

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

그래서 폰트를 바꿔보려고 찾아봤다. 먼저 내가 쓰는 블로그 템플릿은 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);