Ghost 블로그 폰트 바꾸기: 생각보다 간단합니다
Ghost 블로그 기본 폰트가 마음에 안 드시나요? 코드 몇 줄로 Pretendard 같은 웹 폰트를 적용하는 법을 알려드립니다.
저는 Ghost 블로그를 쓰면서 기본 폰트가 계속 마음에 안 들었습니다. 뭔가 밋밋하고, 제 글이랑 안 어울리는 느낌이랄까요. 그래서 폰트를 바꿔보기로 했는데, 알고 보니 생각보다 훨씬 간단하더라고요.
코드를 몇 줄만 넣으면 됩니다. 복잡한 거 하나도 없습니다.
어떤 폰트를 쓸까?
저는 Pretendard를 골랐습니다. 요즘 한글 웹에서 제일 많이 쓰는 폰트 중 하나죠. 깔끔하고 가독성도 좋습니다.
근데 꼭 Pretendard가 아니어도 됩니다. 같은 방식으로 다른 웹 폰트도 얼마든지 적용할 수 있습니다.
1단계: 폰트 링크 걸기
먼저 블로그에게 "이 폰트를 쓸 거야"라고 알려줘야 합니다.
- Ghost 관리자 페이지(
yourblog.com/ghost)로 들어갑니다 - 왼쪽 메뉴에서 톱니바퀴 모양 Settings를 누릅니다
- Code injection을 선택합니다
- Site Header에 이 코드를 붙여넣습니다
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
이게 폰트 파일을 가져오는 코드입니다.
2단계: 실제로 적용하기
링크만 걸었다고 끝이 아닙니다. 이제 블로그 전체에 이 폰트를 쓰라고 지정해줘야 합니다.
아까 붙여넣은 코드 바로 아래에, 이번엔 이걸 추가로 넣어주세요:
<style>
html, body, h1, h2, h3, h4, h5, h6, p, a, li, span, .post-full-title, .post-card-title {
font-family: 'Pretendard', sans-serif !important;
}
</style>
여기서 font-family: 'Pretendard', sans-serif는 "Pretendard 폰트를 쓰되, 안 되면 기본 고딕체라도 써"라는 뜻입니다. !important는 테마 설정을 무시하고 무조건 이 폰트를 쓰라는 강력한 명령어고요.
오른쪽 위에 파란색 Save 버튼 누르면 끝입니다.
폰트가 안 바뀌는데요?
코드를 제대로 넣었는데도 폰트가 그대로라면, 거의 100% 캐시 때문입니다.
브라우저가 예전 버전을 기억하고 있어서 그런 거죠. 강력 새로고침 한 번 해보세요:
- Windows/Linux:
Ctrl + Shift + R - Mac:
Cmd + Shift + R
이러면 캐시를 무시하고 완전히 새로 불러옵니다. 바뀐 폰트가 바로 보일 겁니다.
저는 이렇게 폰트 바꾸고 나서 블로그 보는 맛이 달라졌습니다. 같은 글인데 훨씬 깔끔해 보이더라고요. 여러분도 한번 해보세요. 5분이면 됩니다.