Jekyll 테마 Chirpy Starter (3) 폰트설정

게시 2024/10/27

By 걷는보리

5 분 읽기

이 글은 Chirpy v7.2.0 Starter 버전 기준으로 작성되었으며, Github 환경입니다.

멋진 블로그나 사이트를 거의 똑같이 만들었는데도 뭔가 부족한 느낌이 든다면 폰트 때문입니다. 이 글에서는 Chirpy에 웹폰트를 적용하여 블로그를 더욱 아름답게 보이도록 합니다. 다만, 웹폰트에 자체에 대한 내용은 글의 범위를 넘어가므로 생략하고, 기술적으로 본 블로그에 적용하는 방법만 기재합니다.

기본파일 준비

폰트를 변경하기 위해서는 _sass폴더와 파일들이 필요합니다. Starter는 해당 폴더자체가 없으므로 아래와 같은 방식으로 기본파일을 만들어야 합니다.

Github의 일반버전 페이지로 이동
<> Code▾버튼을 누른 후 Download ZIP 클릭
다운로드 받은 파일에서 _sass폴더를 추출하여 본인의 블로그 Repository에 넣기

웹폰트 가져오기

웹폰트를 제공하는 여러사이트가 있지만 신뢰성이나 다양성 측면에서 구글폰트를 가장 많이 사용합니다. 하지만 구글폰트가 아니라 어떤 서비스도 관계 없습니다. 어느 서비스이나 우리가 사용할 Code를 제공하기 때문에 복사해 오기만하면 됩니다. 제가 적용한 폰트는 아래와 같습니다.

Pretendard from CDN // 본문
Roboto Mono from Google Font // 코드

전문 서비스를 활용하는 방식 외에, CDN이나 자신의 계정 등에 직접 폰트를 올려서 사용하는 방법도 있습니다. 이 경우 구글폰트 등의 서비스에는 없는 폰트를 사용할수도 있다는 장점이 있습니다. 다만, 폰트를 저장할 공간이 필요하고 최적화에 있어서도 추가 작업이 필요하여 권장하지는 않습니다.

구글폰트를 예시로 하여 웹폰트를 적용하는 방법은 다음과 같습니다.

1. 구글폰트 접속

2. 사용할 폰트 검색 후 Get font버튼 클릭

3. <> Get embed code버튼 클릭

4. Web탭에서 @import선택후 예시 코드 저장

CSS 수정

웹폰트 호출

_sass/addon/variables.scss에서 다른 코드가 시작되기 전에 @import로 시작하는 코드를 넣습니다. 저는 Pretendard와 Roboto Mono를 사용하므로 두줄입니다(만약, 두 폰트 모두 구글폰트이면 하나의 @import로 처리 가능).

  
/*
 * The SCSS variables
 */

 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
  

웹폰트 적용

동일한 파일의 하단부에 @import한 폰트명을 추가합니다. 앞에 쓰인 폰트가 우선적용되므로 맨 왼쪽에 적어 줍니다. 폰트명은 앞서 복사해둔 코드에서 font-family의 값입니다.

  
/* fonts(수정전) */
$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;

/* fonts(수정후) */
$font-family-base: 'Pretendard', 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
$font-family-heading: 'Pretendard', Lato, 'Microsoft Yahei', sans-serif !default;
$code-font-family: 'Roboto Mono', 'Pretendard', monospace !default;

추가 : Syntax

영어의 경우 추가로 설정하지 않아도 위의 값이 적용이 되는 것으로 보이나 한글은 적용지 되지않는 현상이 있어 아래와 같이 추가로 수정했습니다.

  
/* 인라인 */ 
.highlighter-rouge {
  color: var(--highlighter-rouge-color);
  font-family: v.$code-font-family; /* 추가한 부분 */
  margin-top: 0.5rem;
  margin-bottom: 1.2em; /* Override BS Inline-code style */
}

/* 블록 */
  pre {
    margin-bottom: 0;
    font-size: v.$code-font-size;
    font-family: v.$code-font-family; /* 추가한 부분 */
    line-height: 1.4rem;
    word-wrap: normal; /* Fixed Safari overflow-x */
  }

Blog, Chirpy