[Jekyll] 깃허브 지킬 블로그 폰트와 사이즈 바꾸기

2 minute read

Updated: January 05, 2021

안녕하세요. 오늘은 깃허브 블로그의 폰트를 바꾸는 법을 알아볼게요! 폰트는 블로그 첫 인상이나 가독성에 큰 영향을 주는 것 같아요. 그만큼 블로그의 디자인이나 특성을 고려해서 여러가지 폰트로 바꿔보는 것도 중요하구요.

저는 현재 메인페이지에는:

글을 쓸때는:

이러한 폰트를 사용하고 있어요. 메인 인덱스 페이지에는 디자인적인 부분을 더 고려했고, 글을 쓰는 페이지에선 가독성을 위주로 골라봤습니다.

⭐️ css를 조금 알고 계시다는 전제 하에 작성하였습니다. 모르시는 분들도 간단하니 도전해보세요!

Table of Contents

현재 사용되고 있는 폰트 보기

현재 쓰고 있는 폰트를 보려면 (디버깅 툴) 아래 방법을 쓰시면 됩니다.

화살표를 열어가며 원하는 섹션이 선택되었으면, 아래와 같이 font-family 속성이 보일거에요. 현재 사용되고 있는 폰트입니다.

자 이제 폰트를 바꿔볼거에요. 먼저 구글 폰트에 접속해 주세요. 폰트의 종류나, 언어, 특성에 따라 필터링해서 볼 수 있어요. 구글 폰트의 장점은 폰트를 다운 받을 필요없이, 링크를 제공하면 사이트가 렌더링 될때 알아서 받아져요.

한국어 폰트는 현재 26개로 많진 않지만, 필요한 폰트는 다 있어요.

원하는 폰트를 고르시고, select this font 를 눌러주시면, 사이드패널에 이런 모습이 뜹니다.

여기서 주목해야할 부분은 @import 과 밑의 css 부분입니다!

자 이제 적용해 봅시다. 구글 폰트를 불러올 거에요.

블로그 구조마다 다르겠지만,

루트폴더 - assets - css - main.css

를 열어주세요. 아니면 해당하는 css파일의 상단에 추가해 주시면 됩니다. 여기에 구글폰트가 제공하는 링크를 추가합니다.

이렇게요.

자 이제, 바꾸고 싶은 부분의 속성이 있는 css파일로 가서, 폰트를 적용해주면 됩니다. 한 부분, 또는 한 섹션만 바꾸고 싶을때는, 브라우저의 요소 보기 기능으로, 원하는 부분의 스타일 이름을 찾아냅니다. 저는 사이트 이름의 폰트를 바꿔볼게요.

💡 저 옆의 header h1에 주목해주세요! 우리가 css파일에서 찾아야 할 부분입니다. css 파일들이 모여있는 폴더에서 header h1 키워드로 검색해서 찾아주세요. 여러파일이 나온다면 열어서 확인해 봐야해요.

찾으셨다면, 구글 폰트가 알려준 css를 복사하세요. (예시는 다른 사진을 사용했어요)

그리고 해당 변수가 있는 부분을 수정해 줍니다. (해당 경우는 h1)

폰트 패밀리 속성을 추가하시거나, 이미 있다면 수정해 주세요!!

font-family: '원하는 폰트' , 폰트 타입;

font-family: 'NanumSquare' , sans-serif;

이렇게요.

폰트 크기 바꾸는 것도 똑같이 css를 수정해주시면 됩니다. 해당 부분으로 가서,

font-size: 2em;

이부분을 바꿔주시면 됩니다.

변경을 적용하기 전에 폰트 사이즈를 미리 테스팅 해보고 싶다면, 속성 탭에서 바로 수정해보세요.

옆의 이름인 Chae Rim Kim 의 사이즈가 확연하게 차이나죠? 이렇게 비교해가며 알맞은 사이즈를 찾으신 뒤, css파일에서 수정하면 훨씬 수월합니다!

👋🏼

이렇게 블로그 폰트와 사이즈를 바꾸는 법을 다뤄봤는데요, 블로그 구조나 페이지 구성마다 방법이 다를 수는 있어요. 하지만 가장 중요한건 원하는 부분과 일치하는 속성을 css파일에서 찾는게 아닌가 싶어요. 속성 보기 기능을 활용해주세요!!

궁금하신 점이 있다면, 댓글 남겨주세요 :)