January 10, 2023
뭔가 한글이 좀 이상하게 보이는 느낌이 들었다.
너무 두껍고 가독성이 떨어진달까나?
그래서 폰트를 바꿔보려고 찾아봤다.
먼저 내가 쓰는 블로그 템플릿은 Gatsby-Starter-Bee이거를 쓰고 있다.
그리고 Node 버전은 이 블로그 구동을 위해 14.15.0으로 설정했다.
이 블로그 템플릿은 typeface를 사용한 거 같은데 이거를 찾아보니 Deprecated 되었다.
Github 참고
그리고 이것을 대신할 것이 fontsource이다.
더 자세한 정보는 FontSource 깃허브 와 공홈 을 참조하자.
무튼…나는 처음에 네이버의 나눔 고딕 폰트를 추가해봤지만…영 별로였다.
그래서 이것저것 찾다가 구글 폰트가 괜찮다 해서 해당 폰트를 찾게 되었다.
일단 적용을 위해 설치를 해준다.
npm install @fontsource/noto-sans-kr
이렇게 설치를 하고 난 뒤에 몇 가지 설정을 해줘야 한다.
아래의 순서로 하나씩 해준다.
상단에 커스텀 폰트를 추가한다.
// 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')
기존에는 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)
여기는 입맛에 맞게 설정하면 되는데 위는 샘플이다.
이렇게 설정하면 글 폰트 보는게 한결 나아진다.
기분탓일 수도 있는데 난 가독성이 좀 올라간거 같아서 마음에 든다.