[Git Page] Git 블로그 폰트 변경하기; Jekyll, Minimal Mistakes

세 줄 요약:

Jekyll & Minimal Mistakes 테마를 이용해 생성한 Git page 블로그는 기본적으로 다양한 폰트를 제공하지 않는다.
그러나 간단한 스크립트 추가를 통해 해당 기능을 구현할 수 있다.
눈누나 구글 폰트를 이용해 다양한 폰트를 찾아 적용할 수 있다.

 

Introduction

---

이번 포스트에서는 Jekyll & Minimal Mistakes 기반 Git 블로그의 폰트를 바꿔봅시다. 처음 Git Page를 만들면 생각보다 폰트가 너무 정직(?)해서 정이 잘 가지 않습니다. 오늘은 그런 딱딱하고 인간미 없는 블로그를 좀 둥글둥글하고 인간적으로 바꿔봅시다.

 

폰트 변경 전 Git Page

 

마음에 드는 폰트 찾기

---

우선 마음에 드는 폰트를 찾아봅시다. Google Fonts, 눈누 등 다양한 곳에서 폰트를 검색할 수 있는데요. 저는 주로 눈누 사이트를 이용해 폰트를 찾곤 합니다. 오늘 예제로 적용할 폰트는 우아한형제들의 주아체입니다. 원하는 폰트를 찾아서 클릭하면 아래와 같은 화면을 볼 수 있는데요. 이 페이지에서 우측의 웹폰트로 사용 부분의 코드를 복사해 줍니다.

 

웹폰트로 사용

 

Git 블로그에 폰트 등록

---

다음은 Git 블로그에 앞서 찾은 폰트를 적용해 봅시다. 두 개의 파일을 수정해야 하는데요. assets/css/main.scss, _sass/minimal-mistakes/_variables.scss를 찾아서 열어주세요. 그리고 아래와 같이 main.scss에는 폰트를 등록하고, _variables.scss에는 앞으로는 등록한 폰트를 사용한다고 선언하면 끝입니다.

 

• main.scss

---
# Only the main Sass file needs front matter (the dashes are enough)
search: false
---

@charset "utf-8";

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials

@font-face {
    font-family: 'BMJUA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

• _variables.scss

/* system typefaces */
$customFont: "BMJUA";
$serif: $customFont, Georgia, Times, serif !default;
$sans-serif: $customFont, -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: $customFont, Monaco, Consolas, "Lucida Console", monospace !default;

 

여기서 _variables.scss에서 폰트 적용을 선언하기 위해 사용한 "BMJUA"는 font-face의 font-family와 같습니다. 다른 폰트를 고르셔도 같은 방법으로 적용 가능합니다.

 

마치며..

---

이번 포스트에서는 Jekyll & Minimal Mistakes 기반 Git 블로그에서 폰트를 변경하는 방법을 살펴봤습니다. 아래는 실제로 적용한 예시이며, 블로그가 좀 둥글둥글해지고 인간적이게 되었습니다. 이제 좀 손이 잘 갈 것 같네요. 다들 맘에 드는 폰트로 변경해 좋은 블로그로 만들어가시면 좋겠습니다.

 

폰트 변경 후 Git Page

 

Reference

---

 

GitHub - YoungJ-Baek/YoungJ-Baek.github.io: YoungJ-Baek.github.io