Jekyll 기반의 GitHub Page 생성(3) - 웹 폰트 설정
Jekyll 기반의 GitHub Page 생성은 여러 절로 구성되어 있습니다.
- Jekyll 기반의 GitHub Page 생성(1) - 환경설정
- Jekyll 기반의 GitHub Page 생성(2) - 블로그 수정 & Publishing
- Jekyll 기반의 GitHub Page 생성(3) - 웹 폰트 설정
- Jekyll 기반의 GitHub Page 생성(4) - rouge를 이용한 syntax highlighting
- Jekyll 기반의 GitHub Page 생성(5) - lunr.js를 이용한 Search 기능 추가
- Jekyll 기반의 GitHub Page 생성(6) - Google Search Console 활용
- Jekyll 기반의 GitHub Page 생성(7) - GitHub Gist 활용
- Jekyll 기반의 GitHub Page 생성(8) - Travis CI 활용(public Repository)
- Jekyll 기반의 GitHub Page 생성(9) - Jekyll site regeneration 속도 향상시키기
영상설명
블로그를 운영할 때 가장 신경써야 하는 부분 중 하나는 readability
입니다.
Jasper2는 영문일 경우 상당히 가독성이 좋은데
한글을 사용하니 폰트때문에 가독성이 많이 떨어지더군요. 그래서 폰트를 좀 바꾸어봤습니다.
이번 영상은 생성한 블로그의 가독성을 높이기 위해 웹폰트를 설정하는 방법에 대한 내용입니다.
Jekyll 기반의 GitHub Page 생성(3) - 웹폰트 설정 영상
웹 폰트 설정
먼저 사용할 웹 폰트를 물색해야 합니다. 구글에서 찾아보면 원하시는 웹 폰트를 쉽게 찾을 수 있습니다. 만만한 나눔고딕 폰트를 이용해 보겠습니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">
나눔고딕 폰트에 대한 링크입니다.
이제 _layout/default.html
파일을 열어서 해당 폰트 링크를 넣어줍니다. 다음과 비슷하게 되겠네요.
<!DOCTYPE html>
<html>
<head>
<!-- Document Settings -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Base Meta -->
...
...
<!-- 웹 폰트 설정 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">
이제 css파일을 수정해서 특정 class에 대한 font-family에 나눔고딕 폰트를 추가해 주면 되겠네요.
Jasper2에서 일반적인 포스트는 모두 .post-full-content
css class의 영향을 받습니다.
다른 theme를 이용하시는 분은 포스트들이 어떤 css class에 영향을 받는지를 확인하셔서
그 class를 찾아 수정하시면 됩니다.
assets/css/screen.css
파일을 열어서 .post-full-content
부분을 찾아 다음과 같이 수정합니다.
Georgia
는 영문폰트이기 때문에 영문은 일단 이 폰트를 먼저 이용하게 되고
한글 부분은 Nanum Gothic
을 사용하게 됩니다.
.post-full-content {
position: relative;
margin: 0 auto;
padding: 70px 100px 0;
min-height: 230px;
font-family: Georgia, 'Nanum Gothic', serif;
font-size: 2.2rem;
line-height: 1.6em;
background: #fff;
}
css가 변경되었으니 gulp
를 이용하여 css task를 수행합니다. 이전 포스트에 gulp 수행에
대한 내용을 참고하시면 될 듯 합니다.
이제 다시 bundle exec jekyll serve
을 수행하면 새로 만들어진 css를 이용하여
블로그가 생성될 것이고 한글로 쓴 내용의 폰트가 나눔고딕으로 변경되는 것을 볼 수 있습니다.
End.