Skip to content

Woosung blog

ghost 블로그 폰트 쉽게 변경하기

Ghost, font

읽는 시간 : 1 분 소요

ghost blog font change easily cover

before

위 이미지는 ghost 블로그의 초기 셋팅 폰트입니다. 뭔가 좀 그렇더라구요.

그래서 바꿨습니다.

after

글자들이 뭔가 깔끔해진 느낌이 듭니다. ㅎㅎ

설정방법

관리자 -> SETTINGS -> Code injection

위 경로로 들어가서 Site Header 부분 제일 위에 넣어줍니다.

1<link href='https://rsms.me/inter/inter.css' rel='stylesheet' type='text/css'>
2<link href='https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>
3<style>
4body,  
5h1, h2, h3, h4, h5, h6,
6.main-nav a,
7.subscribe-button,
8.page-title,
9.post-meta,
10.read-next-story .post:before,
11.pagination,
12.site-footer,
13.post-full-content,
14.post-card-excerpt,
15.post-full-custom-excerpt,
16[class^="icon-"]:before, [class*=" icon-"]:before
17{
18font-family:
19  "-apple-system", "BlinkMacSystemFont","Apple SD Gothic Neo",
20  "Inter", "Spoqa Han Sans", "Segoe UI", Sans-Serif,
21  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
22}
23</style>

현재 제 홈페이지의 구성입니다.

input

위와 같은 형식으로 붙여넣기만 해주면 바로 끝입니다.

코드하이라이트 코드 넣어주기

그리고 현재 보이는 코드 하일라이트를 적용하는 부분도 바로 밑부분에 넣어줬습니다.

1<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css">
2<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
3<script>hljs.initHighlightingOnLoad();</script>
4<style>
5  pre {
6    word-wrap: normal;
7    -moz-hyphens: none;
8    -ms-hyphens: none;
9    -webkit-hyphens: none;
10    hyphens: none;
11    font-size: 0.7em;
12    line-height: 1.3em;
13  }
14  pre code, pre tt {
15    white-space: pre;
16  }
17</style>

위 내용을 그대로 붙여넣어 주시면 됩니다.

ghost 블로그 모든 링크를 새창으로 띄우기

ghost는 기본적으로 현재창으로 열리기 때문에 새창으로 띄우기 코드도 넣어주는 것이 좋다고 생각합니다.

1<script>
2var links = document.querySelectorAll('a');  
3for (var i = 0; i < links.length; i++) {
4  if (links[i].hostname != window.location.hostname) {
5    links[i].target = '_blank';
6    links[i].rel = 'noopener';
7  }
8}
9</script>

위 코드를 코드 인젝션의 site footer에 넣어줍니다.

그리고 저장하면 모든 링크가 새창으로 뜨게 됩니다.

참조 사이트:

  1. 폰트

[고스트 운영] 웹폰트 (Web Fonts) 이용하기

https://bizwatech.com/webfonts

드디어 찾은 최애 폰트 CSS

https://blog.chosunghyun.com/kr-favorite-font-css
  1. 코드 하이라이트

Ghost에 highlightJS 적용하기

https://sy34.net/ghost-highlightjs
  1. 모든 링크를 새창으로 띄우기

Ghost에서 외부 링크를 새로운 창에서 여는 방법

https://blog.chosunghyun.com/kr-ghost-link-new-window