BlogHexo

[Github×Hexo] 폰트 바꾸기(Hueman Theme)

블로그 기본 폰트 변경하기

그 어디에도 테마에 폰트 변경하는 방법은 써 있지 않아 직접 작성하는 포스트! 다른 테마 적용법은 있어도, hueman 적용법은 없는 거 실화냐…

폰트 변경에 사용되는 파일은 단 두 가지이다. head.ejs파일과, _variables.styl파일. 이 두 가지만 수정하면 아주 쉽고 깔끔하게 끝난다.

두 파일의 경로는 다음과 같다. 에디터에 열어두고 수정을 시작해 보자.
[블로그 루트 디렉토리]/themes/hueman/layout/common/head.ejs
[블로그 루트 디렉토리]/themes/hueman/source/css/_variables.styl


head에 웹폰트 url 추가하기

먼저, head에 웹폰트 url을 추가한다. <%- css('웹폰트 url') %> 형식을 따르면 된다. 웹폰트 url을 지우고, 원하는 폰트의 url을 넣은 뒤 head 파일에 추가한다. 해당 코드는 <link rel="stylesheet" type="text/css" href=""> 코드 아래에 추가하면 된다.

아래의 코드는 이 블로그에 적용된 본문 글꼴(나눔스퀘어라운드)과 코드창 글꼴(나눔고딕코딩)의 예시이다.

1
2
3
4
<link rel="stylesheet" type="text/css" href="">
<%- css('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css') %>	
<%- css('https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css') %>
<%- css('css/style') %>

웹폰트 적용하기

적용하는 방법은 아주 간단하다. 폰트의 재사용성(^^)을 높이기 위해 변수 하나에 모든 폰트를 때려박기 때문이다. 다음의 순서로 수정하면 된다.

  1. _variables.styl 파일에서 font-sans나 font-mono를 검색한다.
    font-sans는 본문 폰트이고, font-mono 는 코드 블록 내의 폰트이다.
  2. 변수 오른쪽(=를 기준으로 우변)에 작성된 코드를 지운다. 주석을 추천한다.
  3. 원하는 폰트명을 적는다.
  4. 저장한다.

예시는 다음과 같다.

1
2
3
4
5
6
// Fonts
font-sans = 'Montserrat', "NanumSquareRound", "Malgun Gothic", "맑은 고딕", "돋움", dotum, sans-serif
//font-sans = "Titillium Web", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif
font-serif = Georgia, "Times New Roman", serif
font-mono = "Nanum Gothic Coding", "NanumSquareRound", Consolas, monospace
//font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace

변경 사항을 hexo server로 로컬에서 확인해 보고, 정상적으로 변경되었다면 블로그에 반영하자.


localhost에서는 보이는데 블로그로 접속하면 안 보인다면?

높은 확률로 캐시 때문에 일어난 문제. 브라우저 캐시 날리면 됩니다. ^^b
그래도 안 된다면? 폰트 이름 맨 뒤에 세미콜론 붙이신 건 아닌지 확인해 주세요.


자주 사용되는 웹폰트 URL

아래의 웹폰트는 블로그에서 쓰기 좋은 폰트들이다. 아래의 url을 적용하고, 폰트 이름을 괄호 안에 있는 것으로 지정하면(예- font-sans = "Nanum Barun Gothic", sans-serif) 바로 사용할 수 있다.


Share