Github로 블로그 만들기 4편 - 폰트 변경

1. 맘에 드는 폰트를 웹에서 찾기

Github 블로그에서 폰트를 바꾸기 위해선 다운로드 받아 로컬에 저장하는 형태가 아니라, 웹폰트의 url을 css에 import하는 방법을 사용해야 한다.

우선 원하는 폰트를 골라야 한다. 무료 폰트 사이트인 눈누를 이용하기로 했다.

원하는 폰트를 고르고 ‘웹폰트로 사용’ 부분을 복사해준다.

아래 내용을 복사하면 된다.

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

2. main.scss에 폰트 정보 import하기

그 후에 assets 폴더 -> css 폴더 -> main.scss로 이동하여 복사한 내용을 그대로 붙여넣어준다.

@charset "utf-8";

@import "minimal-mistakes/skins/dirt"; // skin
@import "minimal-mistakes"; // main partials
@import url('https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');
@font-face {
    font-family: 'LeferiPoint-WhiteObliqueA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteObliqueA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

이 때 font-family에 적힌 부분을 복사한다. 위의 경우는 ‘LeferiPoint-WhiteObliqueA’이다. 이 부분을 폰트의 이름으로 생각하면 된다.

3. _variables.scss에 폰트를 변수로 할당하기

폰트의 이름은 _variables.scss에 변수로 할당해놓을 수 있다.

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

여러 가지 폰트가 $변수명의 방식으로 변수로 할당되어 있다. 나는 $Lefer라는 새로운 변수명을 만들고 그 옆에 아까 복사해두었던 폰트명을 붙여넣어주었다.

스크롤을 조금 내리면 아래와 같은 부분이 보인다. 폰트를 변경하고 싶은 부분에 아까 새로 설정한 변수를 넣어주면 된다.

$global-font-family: $Lefer !default;
$header-font-family: $Lefer !default;
$caption-font-family: $Lefer !default;

여기까지 하면 폰트가 깔끔하게 바뀐다!