깃허브 폰트 적용하기

오늘은 깃허브 블로그에서 Noto Sans, D2 Coding 과 그 외 웹폰트를 적용하는 방법을 설명해 보겠습니다.

저는 블로그 전체에서는 Noto Sans 로 고딕 계열을 사용하고, 코드 블록에서는 제 최애 코딩 폰트인 D2 Coding, 인용구에서는 네이버 나눔손글씨 폰트인 옥비체를 사용하겠습니다.

Noto Sans 전체 폰트 변경

고딕 계열 서체는 가독성이 매우 훌륭합니다. PC와 모바일 어디에서든 편히 읽히며 반듯한 한글 구성으로 눈의 피로도를 낮춰준다고 생각합니다. 다음 코드를 블로그 전체 css를 담당하는 .css 파일 상단에 삽입합니다. 저같은 경우에는 body-main-styles.scss 최상단에 삽입하였습니다.

D2 Coding 코드 블록 폰트 변경

D2 Coding 은 소문자 l, 숫자 1, 대문자 I 와 같이 헷갈릴 수 있는 문자를 아름답고 가독성 높게 표현합니다. 코드에서 나타나는 한글 폰트도 고딕 계열로 국내 친화적이라는 것이 장점입니다. 더 다양한 적용방법은 Joungkyun 님의 깃허브에서 구경하실 수 있습니다. 저는 헤더에 JSDelivr url을 스크립트로 임포트한 후 사용하였습니다.

/* Import D2Coding to header */
<link href="http://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css" rel="stylesheet" type="text/css">

다음 코드를 블로그 마크다운 css를 담당하는 .css 파일에 적절히 삽입합니다. 저같은 경우에는 F12키로 코드블록을 확인한 결과, code 태그를 수정해야 했습니다.

/* Apply D2Coding to your css */
/* 적용 결과) 한글을 주석으로 테스트합니다 */
.markdown-style code {
  font-family: D2Coding, 'D2 coding', monospace;
}

언제 다시 consolas 로 돌아갈 지 모르겠지만 좋습니다.

인용구 폰트 변경

과정은 동일합니다. 눈누 에서 웹폰트 코드를 복사해온 후 마크다운 포스팅을 관리하는 .css 파일에 삽입합니다.

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

.markdown-style blockquote > p {
  font-family: 'Okbi';
  font-size: 1.7rem;
}

옥비체 귀엽습니다 ❤️‍🔥

이상한 점이 있다면 댓글로 피드백 주시면 수정하겠습니다. 감사합니다.