Jekyll font 변경하는 방법

3 Jul 2022

intro

vscode로 jekyll 테마 블로그 작업을 진행하던 중 기존 font가 마음에 들지않아서 폰트를 변경하는 작업을 진행하려고 한다.
그 중에서도 구글 폰트로 변경하는 방법을 진행하려고 한다.

process

STEP1. 어떤 파일을 수정해야할지 확인

기존 font를 F12로 확인해본다.
text-font로 묶여있는걸 확인할 수 있다.
vscode에 text-font를 검색한다. (ctrl + shift + f)
- _variables.scss에 text-font가 지정되어 있는걸 확인할 수 있음

STEP2. 구글 폰트에서 원하는 글꼴 선택

text-font를 구글 폰트에 있는 폰트로 변경하려고 한다.

구글 폰트에서 원하는 글꼴 찾기
원하는 폰트의 + Select this style 클릭
선택한 글꼴의 @import 코드 생성 확인

Untitled 3

STEP3. 파일에 구글 폰트 적용

선택한 구글 폰트를 scss에 적용하는 작업을 진행한다.

파일은 크게 styles.scss, _variables.scss 수정 작업을 진행했다.

styles.scss

  @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

_variables.scss

  // --text-font: Times, "Times New Roman", "Free Serif", "Noto Serif", TimesNewRomanPSMT, "Droid Serif";
  --text-font: 'Gothic A1', sans-serif;
    
  // --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --code-font: 'Nanum Gothic Coding', sans-serif;

주석 처리는 기존 font이다.

result

폰트 변경 before/after 비교
- before (text-font)
- after (text-font)

reference

blog