FastBoot 본문 폰트(글꼴) 바꾸기

블로그를 운영하면서 기본적으로 제공되는 폰트 말고 새로운 폰트를 적용 시키고 싶을 때가 있다. 그리고 일부 폰트는 휴대폰이나 작은 화면에서는 잘 보이지 않기 때문에 최적화 된 폰트로 변경하고 싶을 때가 있다. 이럴 경우는 폰트를 추가해서 FastBoot 스킨에서 적용을 해 줘야한다. CSS 코드를 손대야 한다는 부담감은 있지만 조금씩 하다보면 어렵지 않을 것이다.

FastBoot 본문 폰트(글꼴) 바꾸기

가장 많이 사용되는 글꼴인 나눔고딕으로 기본 본문 글꼴을 변경해보도록 하겠다. 크게 두가지 방법이 있는데 폰트 파일을 스킨에 업로드 해 사용하는 방식과, 구글 웹 폰트를 사용하는 방식이 있다. 굳이 용량이 증가하게 스킨에 폰트 파일을 업로드 시키키 보다는 구글 웹 폰트를 사용하는 방법을 적용해 보겠다. 그럼 티스토리 관리에서 CSS코드를 수정해 보도록 하자. 블로그 관리에서 HTML/CSS 편집을 선택하고 CSS 코드를 펼친다.

↓ 아래 파일에서  추가되는 코드를 복사하자

글씨체 코드.txt

CSS 코드 맨 윗줄에 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 라는 코드를 입력하자. 이 방식이 구글 웹 폰트를 사용하는 방식으로 나눔고딕체를 적용한 것이다. 다른 폰트를 적용하려면 마지막의 nanumgothic.css를 변경해 주면 된다. 그리고 아래 그림 17줄에 font-family의 맨 압부분에 NanumGothic, "나눔 고딕" 을 추가 해 주자. font-family 의 값 처음부터 순차적으로 적용된다. 만약 NanumGothic 이 없으면 다음 나눔 고딕 그 것도 없으면  Malgun Gothic 이렇게. 이부분을 수정하면 div, dt, ul, h1, h2 등등 해당 이름을 쓰는 클래스에는 다 적용된다. 우리가 주로 사용하는 h1, h2 등 머릿말과 관련된 곳에도 적용이 된다.

여기까지 했다면 아직 본문에 나눔 고딕을 적용한 것이 아니다. 나눔 고딕을 본문에 적용하기 위해서는 아래 Article 클래스에 font-family를 적용해 줘야한다. font-family:NanumGothic; 을 추가해 주자.

코드를 수정했다면 저장을 하고 글을 한 번 작성해 보자. 내가 강제로 폰트를 바꾸지 않고 글쓰기에서 글을 썼다면 나눔고딕으로 글이 나타날 것이다.

이 코드를 수정한다고 해서 글쓰기 모드에서 폰트가 바뀌는 것은 아니다. 하지만 글을 발행 하면 나눔고딕으로 설정 된 것을 볼 수 있을 것이다.

 FastBoot 본문 글자 크기 변경하기

 FastBoot 티에디션 사용해 Home 화면 꾸미기

 FastBoot 글 목록 List로 보기