GitHub Blog 폰트 설정 - Jekyll SCSS로 커스텀 폰트 적용하기

GitHub Pages 기반 Jekyll 블로그에서 폰트를 커스터마이징하고 싶다면,
_variables.scss, main.scss, 그리고 @font-face를 수정해 구글 폰트 적용이 가능합니다.
이 글에서는 Dongle 폰트를 기준으로 minimal-mistakes 테마에서의 적용 과정을 단계별로 설명합니다.

https://fonts.google.com/

저는 폰트를 다운 받아서 진행했습니다. Dongle Font(Dongle-Regular.ttf)를 사용하고 있습니다.

_sass\minimal-mistakes_variables.scss 추가

$dongle: "Dongle", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !default;

수정해야 할 부분:

$global-font-family: $sans-serif !default;
$header-font-family: $sans-serif !default;

수정할 코드:

$global-font-family: $dongle !default;
$header-font-family: $dongle !default;

수정해야 할 부분:

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

/* sans serif typefaces */
$sans-serif-narrow: $sans-serif !default;
$helvetica: "Dongle", Helvetica, "Helvetica Neue", Arial, sans-serif !default;

위 처럼 Dongle를 추가해주었습니다.

\assets\css\main.scss 추가

@font-face {
  font-family: "Dongle";
  src: url("/assets/fonts/Dongle-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

저는 기본 폰트가 더 이뻐 보이더라고요. 저는 그래서 다시 기본 폰트로 복구 했습니다.