github hexo blog web font 적용하기

환경

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

폰트 고르기

theme 코드 변경

layout/common/head.jsx
1
2
3
4
5
6
7
8
9
10
// 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
1
2
$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
1
$article-font-size ?= 1.3rem
  • 하는 김에 본문 폰트 사이즈도 키워주었다

확인하기

1
2
hexo generate
hexo server
  • 잘 갱신되었는지 확인한다

배포하기 전 확인하기

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

참고

Author

chinsung

Posted on

2020-11-20

Updated on

2021-08-04

Licensed under

댓글