Ghost : changing font, 폰트 바꾸기
In short;
Assuming you have Ghost v1.0.0 (or above) with default theme, Casper.
Default font is Georgia. We will change font with Google Web fonts.
cd {your-ghost-dir}/content/themes/casper # move to theme directory
npm install gulp-cli -g # install gulp globally
npm install # install npm packages in theme dir
gulp # execute gulp. monitoring changes in theme
And remove every font-family : Georgia, serif;
in ./assets/css/screen.css
For ex)
.post-card-excerpt {
font-family: Nanum Gothic, serif;
}
to
.post-card-excerpt {
}
The changes in ./assets/css/screen.css
will be compiled to ./assets/built/screen.css
by gulp
.
And restart your blog at theme directory by ghost restart
So, if you don't want to
npm install
anything, probabily removing allfont-family : Georgia, serif;
in./assets/built/screen.css
also works.
Then, find favorite font in Google Web fonts. I picked Nanum Gothic
font. Inject following code at the first row of Blog Header
into in Labs, http://your-blog.com/ghost/#/settings/code-injection/
<link href='https://fonts.googleapis.com/css?family=Nanum+Gothic' rel='stylesheet' type='text/css'>
<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,{
font-family:"Nanum Gothic", sans-serif;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"Nanum Gothic", sans-serif;
</style>
Done.
우리말로 길게 말해서;
어느 일본 블로그를 자동 한글 번역해서 봤는데, 참고해서 해봄. code injection을 통해서하는데, 목표는 구글 웹포트의 Nanum gothic을 사용하는 것. 구글 웹폰트 그리고 무료 사용 가능 한글 구글 웹폰트에서 원하는 폰트를 찾는다.
나눔고딕은
<link href='https://fonts.googleapis.com/css?family=Nanum+Gothic' rel='stylesheet' type='text/css'>
<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,{
font-family:"Nanum Gothic", sans-serif;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"Nanum Gothic", sans-serif;
</style>
그리고 내가 더 좋아하는 나눔바른고딕은
<link href='https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css' rel='stylesheet' type='text/css'>
<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"Nanum Barun Gothic", sans-serif;
</style>
를 code injection에서 Blog Header
에서 맨 처음에 삽입해준다.
그러나 이상하게도 블로그 제목만 반영되는 현상 발견..
블로그 front 페이지 abstract와 포스트의 메인 컨텐츠의 폰트가 바뀌지 않음 발견. 보니까 안바뀌는 폰트가 Georgia이었다. ghost의 theme폴더에서 ./asset/css/screen.css
파일에서 Georgia
폰트를 발견했다.
특히 그부분에서 문제가 됬던 파트들, .post-card-excerpt
, .post-full-content
등에서 Georgia
로 고정되어 있음을 알수있었다. 따라서 그 부분 font-family : Georgia, serif;
를 원하는 폰트로 바꾸거나 아니면 아예 삭제한다.
그리고 css파일이 바뀔때마다 테마 홈 디렉토리에서 ghost restart
해준다.
하지만 그래도 반영이 안되는데. 왜냐하면 ./default.hbs
에서 <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
로 built된 css만 반영되기 때문이다.
그래서 built가 무엇인가 하니 ./READEME.md
에서 자동으로 css의 폴더를 compile한 것이라 한다. 즉 ./assets/built/screen.css
는 ./assets/css/screen.css
를 압축시킨 동일한 code이다. 이는 css의 inlining을 통해 optimize한다 라는 글에서 힌트를 얻었다.
따라서 ./assets/built/screen.css
문제되는 부분의 Georgia
를 Nanum Gothic
으로 바꿔주면 되는데 테마 개발 의도랑 다르니 그냥 테마 READEME.md
가 하라는대로 하자.
그래서 우선 gulp가 필요한데, 지속적으로 테마의 file들을 보다가 수정사항이 있으면 자동으로 compile해주는 것이라 보면 된다. 전역 설치해줘야 하니 npm install gulp-cli -g
. 테마 폴더에서 npm install
후 gulp
실행 계속 켜져있는다.
그럼 아까 했던 바꿨던 Georgia
를 Nanum Gothic
으로 바꾼게 compile되는 것이 확인되면 블로그 폰트도 바뀌는 것을 확인할 수 있다.
나는 거기에 code block
의 폰트까지 내가 좋아하는 Ubuntu로 바꾸었다. 만족감 에헿.