Github 블로그 커스터마이징 - font
Github 블로그 커스터마이징 - font편
minimal-mistakes 테마에서 기본으로 제공하는 폰트의 가독성이 떨어진다고 느껴지면, 폰트를 변경해 가독성을 높일 수 있다. 이번편에서는 font를 변경하는 아주 간단한 방법을 알아보려한다.
사람마다 차이는 있겠지만, font 변경 후의 가독성이 훨씬 뛰어나보인다.
[변경 전]
[변경 후]
이제, google Fonts를 활용해 font를 변경해보자.
1) google Fonts에서 원하는 font 선택하기
추천하는 서체는 위와 동일한 Noto Sans KR이다. 이외에도 다양한 font를 적용할 수 있다. Google Fonts 보러가기
위 링크를 통해 접속하면, 사진처럼 font의 굵기를 선택할 수 있다. 원하는 스타일을 찾아 Select this style을 클릭하자.
2) font 적용하기
그 다음으로 font를 적용시키는 방법이다. link를 거는 방법과 import 두 가지 방식이있는데, jekyll에서는 두 번째 import 방식을 추천한다.
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@import "minimal-mistakes/skins/default"; // skin
@import "minimal-mistakes"; // main partials
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
style태그를 제외하고 복사 한 후에 /assets/css/main.scss 파일에 붙여 넣어주자.
$global-font-family: 'Noto Sans KR', sans-serif;
$header-font-family: 'Noto Sans KR', sans-serif;
$caption-font-family: 'Noto Sans KR', sans-serif;
font-family는 /_sass/minimal-mistakes/_variable.scss 경로에 붙여 넣어주면, font 적용이 완료된다.
$global-font-family는 게시글의 본문,
$header-font-family는 게시글의 헤더,
$caption-font-family는 프로필에 해당한다.
Leave a comment