Jekyll 블로그 커스텀 폰트 적용하기

Jekyll의 github blog에 구글 웹 폰트 같은 것이 아닌 custom font를 적용하는 법을 알아보겠다.

구글 웹 폰트를 적용하는 법을 소개하는 블로그는 많았지만, 이렇게 커스텀 폰트를 적용하는 블로그를 찾기 힘들었다.


우선 나는 네이버의 나눔스퀘어를 적용시켜 보았다.
otf 형식으로 받아온 후,
assets/css/main.scss에서

@font-face {
    font-family: "NanumSquareRoundOTFB";
    src: url("../font/NanumSquareRoundOTFB.otf");
}

위와 같이 폰트 이름을 설정하고, 경로를 지정해 주었다.

그런 다음, sass/minimal-mistakes/variables.scss에서

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

2번째 줄에 보이듯이 가장 앞에 적용시켜 주었다.




그러면 이렇게 예쁘게 적용이 된다!