/ ghost

Ghost : changing font, 폰트 바꾸기

Comments

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 all font-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 문제되는 부분의 GeorgiaNanum Gothic으로 바꿔주면 되는데 테마 개발 의도랑 다르니 그냥 테마 READEME.md가 하라는대로 하자.

그래서 우선 gulp가 필요한데, 지속적으로 테마의 file들을 보다가 수정사항이 있으면 자동으로 compile해주는 것이라 보면 된다. 전역 설치해줘야 하니 npm install gulp-cli -g. 테마 폴더에서 npm installgulp실행 계속 켜져있는다.

그럼 아까 했던 바꿨던 GeorgiaNanum Gothic으로 바꾼게 compile되는 것이 확인되면 블로그 폰트도 바뀌는 것을 확인할 수 있다.

나는 거기에 code block의 폰트까지 내가 좋아하는 Ubuntu로 바꾸었다. 만족감 에헿.

Junho Cho

Junho Cho

Integrated Ph.D course and Interested in Computer Vision, Deep Learning. For more information, tmmse.xyz/junhocho/

Read More