Jekyll 기반 블로그 다듬기 1 - 폰트

on Blog customizing

Hydejack 테마에 이것 저것 필요한 기능을 붙여보았다

구글 웹폰트 사용하기 (한글)

처음엔 블로깅을 전부 영어로 할까… 생각했었는데 아무래도 잠시 미쳤었나보다. 한글로 써서 포스팅하는 것도 아직 습관이 되지 않아 쉽지 않은데, 처음부터 너무 목표를 높게 설정하는 것 같아 그냥 한글로 하기로 했다 ^____________^

문제는 OS마다, 브라우저마다 다른 한글 폰트…… 방법을 찾던 중 구글 웹폰트를 적용하면 된다는 것을 알았고 더욱 깊은 자료조사를 하였다.

자료조사

Jekyll, google webfont 등의 키워드로 조금만 찾아보면 이미 좋은 글들이 많다. 그중 나에게 도움이 되었던 것들을 몇 개 소개하자면 다음과 같다.

공통적인 내용을 정리하면 이렇다.

  1. 나눔 고딕 CSS 파일을 @import 해서 사용하는 방법, 또는 구글 웹폰트 로더(webfont.js) 를 사용하는 방법 중 하나를 선택해서 CSS 파일을 로딩 해야함
  2. style에서 폰트를 사용해야함

적용

이 블로그의 바탕이 되는 테마는 Poole 테마를 변경한 Hyde 테마를 변경한 Hydejack 테마이다. 반응형 웹이 맘에 들었고 곳곳에 숨어있는 자바스크립트 애니메이션이 맘에 들어서 사용하게 되었다.

Hydejack 테마는 _config.yml 파일에 폰트리스트를 만들어두고 _include/head.html 에서 불러오는 방식을 사용한다. 따라서 _config.yml 에서 폰트 리스트를, _include/head.html에서 로딩 스크립트를 추가하였다.

_config.yml 파일

# The font used for headings. Expects a string that is a valid CSS font-family value.
font_heading:        "'Roboto Slab', 'Nanum Gothic', Helvetica, Arial, sans-serif"

# The text font. Expects a string that is a valid CSS font-family value.
font:                "'Noto Sans', 'Nanum Gothic', Helvetica, Arial, sans-serif"

# The string encoding what fonts to fetch from Google Fonts.
# See: https://qwtel.com/hydejack/docs/configuration/
google_fonts:        Roboto+Slab:700|Noto+Sans:400,400i,700,700i

# If you do not use a Google Fonts, uncomment the line below
# no_google_fonts:     true

_include/head.html 파일

<!--여기부터-->

{% comment %}---------------------------
              SCRIPTS
------------------------{% endcomment %}
<!--[if gt IE 8]><!---->
{% assign google_fonts = site.google_fonts | default:"Roboto+Slab:700|Noto+Sans:400,400i,700,700i" %}
{% capture icons_url %}{% link assets/icomoon/style.css %}{% endcapture %}
<script>
  WebFontConfig = {
    {% unless site.no_google_fonts %}
    google: {
      families: '{{ google_fonts }}'.split('|')
    },
    {% endunless %}
    custom: {
      families: ['Nanum Gothic', 'icomoon'],
      urls: ['https://fonts.googleapis.com/earlyaccess/nanumgothic.css', '{{ icons_url | relative_url }}']
    }
  };
</script>
<script async src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<!--<![endif]-->

<!--여기까지-->

오늘은 여기까지

blastak © 2017. All rights reserved.