Hexo 폰트 변경하기 (Hueman 테마)

🗓 ⏰ 소요시간 6 분

오랫만에 예전에 올렸던 글을 살펴봤습니다. 이제보니 글자 크기는 괜찮은데 폰트가 너무 얇아서 눈에 잘 들어오지 않고, 잘 읽히지가 않았습니다. 글을 올리는 것에만 신경썼지 올라간 글을 자세히 읽어보질 않았던 것 같습니다. 몇 번 읽어봐도 가독성이 영 좋지 않아서 폰트를 바꿔야겠다 마음 먹었습니다.

Font 고르기

보통 웹 폰트는 일반 폰트와 달리 용량을 줄이기 위해 자주 쓰는 글자만 추려서 CDN 형식으로 받아서 사용합니다. 블로그에서 쓸 폰트를 찾기 위해 구글에서 '무료 웹 폰트’를 검색하면 정말 많은 폰트가 나옵니다. 그 중에서 마음에 드는 폰트를 골라봅니다.

저는 d2fault님의 블로그를 참고했습니다. 블로그에 쓸만한 폰트를 잘 정리해주셔서 큰 도움이 됐습니다. 저는 바탕체나 명조체같은 진지한 폰트를 더 좋아하지만 블로그에 적용해보니 분위기가 너무 딱딱해서 안 어울리네요. 개인적으로도 종종 사용하는 '나눔스퀘어라운드’를 적용해야겠습니다. 가독성이 좋고 깔끔합니다.

1
2
나눔스퀘어라운드(NanumSquareRound)
https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css

이 외에 미생체도 깔끔해보이는데 나중에 적용해보고 싶네요. 미생체는 따로 웹 폰트로 나오진 않았지만, 웹 폰트로 만들어놓은 블로그가 있어서 필요하신 분들은 참고하시면 좋겠습니다.

head.ejs 수정하기

해당 css 의 CDN 링크를 복사했으면 다운로드할 수 있게 <head> 태그 안에 넣어야겠죠? css 링크를 넣을 때는 다음 helper 를 사용하면 편합니다.

1
2
3
4
5
6
// <link rel="stylesheet" href="/style.css" type="text/css">
<%- css('style.css') %>

// <link rel="stylesheet" href="/style.css" type="text/css">
// <link rel="stylesheet" href="/screen.css" type="text/css">
<%- css(['style.css', 'screen.css']) %>

Hueman 테마의 <head> 부분을 만드는 /themes/hueman/layout/common/head.ejs 파일을 수정하면 됩니다. <head> 태그 안쪽에 다음과 같이 추가하면 페이지가 로딩될 때 해당 css 를 같이 로드하게 됩니다.

1
<%- css('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css') %>

설정 변경하기

이제 로드된 css 를 적용해보겠습니다. 스타일 관련 변수들을 저장하고 있는 /themeshueman/source/css/_variables.styl 파일을 수정합니다. 들어가면 Fonts 로 시작하는 부분이 있는데요, font-sans는 본문 폰트이고 font-mono 는 코드 폰트입니다.

본문 폰트를 변경하기 위해 NanumSquareRound 를 추가했고, 필요 없는 폰트들은 제거했습니다. 코드 폰트의 경우에는 개인적으로 좋아하는 Source Code Pro 는 그대로 사용하는데 이 폰트가 한글을 지원하지 않기 때문에 한글 주석을 예쁘게 출력하기 위해 NanumSquareRound 를 추가로 적용했습니다. 이 때 이름은 폰트의 영문명을 적어주시면 됩니다.

1
2
font-sans = NanumSquareRound,"Helvetica Neue", sans-serif
font-mono = "Source Code Pro", NanumSquareRound, Consolas

한글을 지원하는 개발용 폰트에는 ‘D2Coding’, ‘나눔고딕코딩’ 등이 있습니다. 나눔고딕코딩은 '나눔고딕’을 기반으로 만들었고, D2Coding은 ‘나눔바른고딕’ 폰트를 기반으로 만들었다고 하네요. D2Coding이 좀 더 최근에 나왔습니다. 두 폰트 모두 개발자들에게 많이 애용되는 폰트죠.

로컬에서 확인 후 서버에 반영합니다. 반영 후 나오지 않으면 캐시를 삭제하고 시도해보시면 됩니다.

1
2
3
# hexo server --draft
# hexo g
# hexo d

폰트를 바꾸니 가독성이 상당히 높아졌습니다. 그렇다고 너무 많은 폰트를 추가하게 되면 페이지 로딩이 느려지니 주의하시길 바랍니다.