github hexo blog web font 적용하기

• 기본 한글 폰트가 너무 구려서 웹폰트라는 것을 적용시켜보았다
• http://deminoth.github.io/google-font-kor/ 한글 폰트
• 나눔 고딕을 적용해보았다

환경

• 나는 hexo에서 icarus 테마를 사용하고 있다

폰트 고르기

• https://fonts.google.com/?subset=korean

theme 코드 변경

layout/common/head.jsx

// 51 line
const fontCssUrl = {
  default: fontcdn("Ubuntu:wght@400;600&family=Source+Code+Pro", "css2"),
  cyberpunk: fontcdn("Oxanium:wght@300;400;600&family=Roboto+Mono", "css2"),
  nanumgothic: fontcdn("Nanum+Gothic:wght@400&family=Roboto", "css2"),
};

// 151 line
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href={fontCssUrl['nanumgothic']} rel="stylesheet" />

• fontcdn 이라는 메서드가 있어서 그냥 활용했다
• icarus theme config 파일의 fontcdn이 google로 되어있어서 그대로 사용할 수 있었다

include/style/base.styl 8 line

$family-sans-serif ?= 'Nanum Gothic', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
// $family-sans-serif ?= Ubuntu, Roboto,'Nanum Gothic Coding', 'Open Sans', 'Microsoft YaHei', sans-serif

• 나눔고딕을 3순위로 했는데, 영어랑 한글이랑 부자연스러운 것 같아서 그냥 나눔고딕을 1순위로 올렸다

include/style/article.styl 4 line

$article-font-size ?= 1.3rem

• 하는 김에 본문 폰트 사이즈도 키워주었다

확인하기

hexo generate
hexo server

• 잘 갱신되었는지 확인한다

배포하기 전 확인하기

• hexo server에서는 최신 css 상태를 반영하는데,
• 그런데 실제로 배포될 때는 css파일이 갱신이 안된다
• 그래서 public/css/default.css 파일을 삭제하고, 다시 hexo generate로 생성해야한다
• 그리고 배포한다

참고

• Jekyll 기반의 GitHub Page 생성(3) - 웹 폰트 설정