Ghost 글 폰트 변경하기

Ghost에서 기본적으로 제공하는 테마는 영어 기반의 글에 최적화되어 있다. 그래서 한글로 작성하면 뭔가 폰트가 마음에 안 들었다. 그래서 변경하고자 하는데 변경하는데 2가지 방법이 있다.

• Code Injection을 통해 Font Link와 CSS를 작성한다.
• 테마를 수정한다.

나는 이 중에 테마를 수정하는 방법을 공유하고자 한다.

---

준비물/결정할 내용

• 테마의 원본 소스
  • 특히, 라이선스가 수정할 수 있는지 확인해야 한다. 불가 시, Code Injection 방식으로 진행하면 된다.
• 폰트 - 예제에서는 나눔고딕으로 진행
  • 폰트 라이선스를 취득했는지, 무료 폰트라면 사용해도 문제가 없는지 확인해야 한다.
  • 확장자는 woff2, woff가 권장된다.
• 폰트 배포 방식의 결정
  • 테마 내의 Assets에 삽입하여 배포할지 -> 폰트 트래픽 요청이 블로그로 감
  • Google Font 등 외부 서비스를 이용할지 -> 폰트 트래픽이 외부 서비스로 감
  • S3 또는 CDN에 올려둘지 -> 폰트 트래픽이 S3 또는 CDN으로 감

적용하기

폰트 정보 정의

테마의 assets/css에 들어가면 fonts.css라는 파일이 있는데 최하단에 정의해주면 된다. 나 같은 경우에는 Google Font에서 제공하는 나눔고딕, 나눔고딕 Coding을 사용하고자 하므로 사진과 같이 작성했다. 나와 동일하게하고자 하면 아래 코드를 집어넣으시라.

@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&family=Nanum+Gothic:wght@400;700;800&display=swap")

만일, 다른 폰트를 넣고 싶다면 아래와 같이 폰트 정보를 정의하면 된다.

@font-face {
  font-family: "<폰트 이름>";
  font-style: italic;
  font-weight: "<폰트 굵기>";
  /* 상대 경로는 테마 내의 assets에서 갖고오길 원할 때.
    그 외 URL은 CDN, 외부 서비스에서 갖고 오길 원할 때
  */
  src: url("../fonts/lora-v25-latin-700italic.woff2") format("woff2"), url("../fonts/lora-v25-latin-700italic.woff") format("woff");
}

src 부분에 url이 여러 개인 경우, 순서대로 적용된다. 그러므로 woff2가 먼저 나오면 좋다.

폰트 적용

그 다음, 이 폰트를 사용하겠다고 선언해줘야한다.

package.json을 통해서 폰트 옵션을 추가한다. 여기서 이름은 font-family에 정의한 이름이다.

테마 적용

테마를 적용하기 위해서는 zip 형태로 압축해야한다.

yarn zip

위 명령어를 이용해 zip파일로 만들고, 업로드한다.

폰트 선택

테마를 업로드 했다면 Admin -> Settings -> Design & branding -> Theme 탭에 진입하면 정의한 폰트가 있을 것이다. 폰트를 선택하고 Save 한다.