블로그를 보다가...
뭔가 한글이 좀 이상하게 보이는 느낌이 들었다.
너무 두껍고 가독성이 떨어진달까나?
그래서 폰트를 바꿔보려고 찾아봤다.
먼저 내가 쓰는 블로그 템플릿은 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)여기는 입맛에 맞게 설정하면 되는데 위는 샘플이다.
이렇게 설정하면 글 폰트 보는게 한결 나아진다.
기분탓일 수도 있는데 난 가독성이 좀 올라간거 같아서 마음에 든다.
참고