[Jekyll] 깃 블로그에 웹 폰트 적용하기

오랜만에 블로그 디벨롭을 했습니다 ㅎㅎ 기존에 쓰던 폰트는 윈도우 환경에서 봤을때 많이 깨져보여서 눈이 침침해 바꾸기로 결정했습니다 😭

저는 주로 이 평생 공부 블로그를 참고해서 블로그를 꾸미는 편입니다! 정리도 잘 되어있고 이분 블로그 자체도 너무 이뻐서 많이 참고하게 되네요 ㅎㅎ

그럼 이제 웹 폰트를 적용해보도록 하겠습니다~😘 순서는 다음과 같습니다!

1. 무료 웹 폰트 고르기

• 눈누 : https://noonnu.cc/index
• 구글 폰트 : https://fonts.google.com/

(저는 눈누에서 했기 때문에 눈누에 대해서만 적도록 하겠습니다.)

2. 폰트 임포트 하기

원하는 폰트를 골랐다면 아래 @font-face를 복사 해주자!

다음으로, assets/css/main.scss 이 디렉토리로 이동해 main.scss 파일의 가장 아래부분에 붙여넣어주면 됩니다! (저는 그냥 맨 밑에다가 붙여넣기 했습니다. 어디에 두던지는 상관없을 것 같네요!)

그리고 맨 윗 부분을 보면, san-serif 부분에 자신이 다운받은 폰트의 이름을 적어주세요! 눈누 폰트의 경우 font-family:에 적혀있는 이름입니다.

$sans-serif: 'GowunDodum-Regular'; // 자신이 다운받은 폰트의 이름! 을 적어주세요 
$monospace: 'Ubuntu Mono';
$type-size-4-5: 1.12em !default; // Ubuntu Mono is a bit small

몇 분? 정도 시간이 지나면, 이제 폰트가 적용된 화면을 볼 수 있을거에요~! 😘😘

참고

[1] https://ansohxxn.github.io/blog/font/