본문 바로가기
IT & TECH/TISTORY tool

Fastboot 스킨 글자 크기와 나눔고딕 폰트로 변경, 코드첨부

by lilyryu 2017. 6. 30.

티스토리 블로그를 Fastboot 스킨로 교체한 후 몇 가지 변경 작업을 해주었다. 그 중 하나가 폰트를 '나눔 고딕'으로 바꾼 것이다.방법은 간단하다. 구글 웹폰트 사이트로 가서 폰트 코드를 붙이기만 하면 된다. 폰트를 변경한 후 본문의 글자 크기를 12pt로 일괄 변경했다. Fastboot 스킨 1.6.2 버젼은 10pt로 설정되어 있어서 작은 감이 없지 않았다. HTML에서 설정해두면 기본 12pt로 적용된다. 모바일 상에서는 12pt도 약간 작게 느껴져서 14pt로 변경할까 고민 중이다. 

 

 

티스토리폰트변경Fastboot글자크기 (1).jpg

 

티스토리 Fastboot 스킨 글자 크기와 나눔고딕 폰트로 변경하는 방법

먼저 구글 웹폰트 사이트로 간다.

http://deminoth.github.io/google-font-kor/ 

 

 

구글은 한글체 중 Hanna, Jeju Gothic,Jeju Hallasan,Jeju Myeongjo, Nanum Brush Script, Nanum Gothic,Nanum Myeongjo, Nanum Gothic Coding, Nanum Pen Script 를 지원한다. 별도로 지정하지 않으면 기본 폰트로 출력된다. 위의 폰트를 스타일로 지정해두면 웹페이지에서 지정한 글자체로 출력되게 된다. 원하는 폰트로 선택해서 자신의 블로그나 홈페이지에 적용해보자.

 

 

 

 

티스토리폰트변경Fastboot글자크기 (4).jpg

각 폰트에 @import url(...) 부분을 복사한다.

그리고 'Nanum Gothic'이라는 폰트 이름을 기억해둔다.  기억이 쉽지 않다면 이 부분도 복사해서 붙이면 되겠다.

 

 

 

 

 

 

티스토리 글자체를 나눔고딕 폰트로 변경하는 방법

 

티스토리 관리자 페이지의 HTML/CSS로 들어간다.

 

 

CSS 페이지를 연다.

Fastboot 스킨을 적용한 상태이므로 다른 티스토리 스킨을 적용한 상태라면 CSS의 코드는 다를 것이다.

티스토리폰트변경Fastboot글자크기 (2).jpg

 

복사한 코드를 CSS 페이지의 상단에 붙여 넣는다. @들이 있다면 그 아래나 위에 붙이면 된다.

 

그리고 다음, font-family 바로 뒤에 'Nanum Gothic'이라는 폰트 이름 그대로 넣는다. 띄어쓰기도 그대로 해줘야 하며 폰트이름이 두 단어 이상이라면 'Nanum Gothic' 처럼 작은 따옴표로 묶어주어야 한다. 폰트는 font-family 에 기재해둔 순서대로 적용되므로 '나눔 고딕' 폰트를 적용하고 싶다면 가장 첫 번째 적어 넣는다. 첫 번째 폰트가 없으면 두 번째 폰트가, 두 번째 폰트가 없으면 세 번째 폰트가 적용되는 방식이다.

 

font-family : 'Nanum Gothic',

 

 

 

 

 

 

 

 

티스토리 글자 크기를 변경하는 방법

 

나눔 고딕으로 티스토리 Fastboot 스킨의 폰트를 변경했으니 다음은 폰트 크기를 변경해보자.

 

 

HTML 페이지를 연다.

 

티스토리폰트변경Fastboot글자크기 (1).jpg

 

[ctrl+F]로 ##_article_rep_desc_## 를 찾는다.

 

<SPAN style="FONT-SIZE:12pt;">

티스토리 블로그를 Fastboot 스킨로 교체한 후 몇 가지 변경 작업을 해주었다. 그 중 하나가 폰트를 '나눔 고딕'으로 바꾼 것이다.방법은 간단하다. 구글 웹폰트 사이트로 가서 폰트 코드를 붙이기만 하면 된다. 폰트를 변경한 후 본문의 글자 크기를 12pt로 일괄 변경했다. Fastboot 스킨 1.6.2 버젼은 10pt로 설정되어 있어서 작은 감이 없지 않았다. HTML에서 설정해두면 기본 12pt로 적용된다. 모바일 상에서는 12pt도 약간 작게 느껴져서 14pt로 변경할까 고민 중이다. 

 

 

티스토리폰트변경Fastboot글자크기 (1).jpg

 

티스토리 Fastboot 스킨 글자 크기와 나눔고딕 폰트로 변경하는 방법

먼저 구글 웹폰트 사이트로 간다.

http://deminoth.github.io/google-font-kor/ 

 

 

구글은 한글체 중 Hanna, Jeju Gothic,Jeju Hallasan,Jeju Myeongjo, Nanum Brush Script, Nanum Gothic,Nanum Myeongjo, Nanum Gothic Coding, Nanum Pen Script 를 지원한다. 별도로 지정하지 않으면 기본 폰트로 출력된다. 위의 폰트를 스타일로 지정해두면 웹페이지에서 지정한 글자체로 출력되게 된다. 원하는 폰트로 선택해서 자신의 블로그나 홈페이지에 적용해보자.

 

 

 

 

티스토리폰트변경Fastboot글자크기 (4).jpg

각 폰트에 @import url(...) 부분을 복사한다.

그리고 'Nanum Gothic'이라는 폰트 이름을 기억해둔다.  기억이 쉽지 않다면 이 부분도 복사해서 붙이면 되겠다.

 

 

 

 

 

 

티스토리 글자체를 나눔고딕 폰트로 변경하는 방법

 

티스토리 관리자 페이지의 HTML/CSS로 들어간다.

 

 

CSS 페이지를 연다.

Fastboot 스킨을 적용한 상태이므로 다른 티스토리 스킨을 적용한 상태라면 CSS의 코드는 다를 것이다.

티스토리폰트변경Fastboot글자크기 (2).jpg

 

복사한 코드를 CSS 페이지의 상단에 붙여 넣는다. @들이 있다면 그 아래나 위에 붙이면 된다.

 

그리고 다음, font-family 바로 뒤에 'Nanum Gothic'이라는 폰트 이름 그대로 넣는다. 띄어쓰기도 그대로 해줘야 하며 폰트이름이 두 단어 이상이라면 'Nanum Gothic' 처럼 작은 따옴표로 묶어주어야 한다. 폰트는 font-family 에 기재해둔 순서대로 적용되므로 '나눔 고딕' 폰트를 적용하고 싶다면 가장 첫 번째 적어 넣는다. 첫 번째 폰트가 없으면 두 번째 폰트가, 두 번째 폰트가 없으면 세 번째 폰트가 적용되는 방식이다.

 

font-family : 'Nanum Gothic',

 

 

 

 

 

 

 

 

티스토리 글자 크기를 변경하는 방법

 

나눔 고딕으로 티스토리 Fastboot 스킨의 폰트를 변경했으니 다음은 폰트 크기를 변경해보자.

 

 

HTML 페이지를 연다.

 

티스토리폰트변경Fastboot글자크기 (1).jpg

 

[ctrl+F]로 ##_article_rep_desc_## 를 찾는다.

 

<SPAN style="FONT-SIZE:12pt;">

</SPAN>

위와 같이 <SPAN>태그로 폰트 사이즈를 변경하면 된다.


티스토리폰트변경Fastboot글자크기.PNG

티스토리 블로그의 글자체가 나눔고딕 폰트로 변경된 모습이다.


 

귀차니즘이신 분들을 위해 코드 첨부합니다.

티스토리 Fastboot 스킨 글자 크기와 나눔고딕 폰트로 변경하는 방법.txt
다운로드

 

 

 


 

2017/06/29 - [TISTORY tool] - 티스토리 임시저장 오류시 크롬chrome flags 플래시 사용설점됨 확인

2017/06/28 - [TISTORY tool] - Fastboot 스킨 설치 후 애드센스 페이지 수준 광고 재설정 방법

2017/06/13 - [TISTORY tool] - 수익도구 텐핑 모바일과 PC에 설치하는 방법

2017/04/23 - [TISTORY tool] - 티스토리 포토 업로드 안될 때 어도비 플래시 플레이어 다운받기

2017/01/19 - [TISTORY tool] - 티스토리 사이트맵 만들고 네이버 웹마스터도구에 제출하기

 

 

</SPAN>

위와 같이 <SPAN>태그로 폰트 사이즈를 변경하면 된다.


티스토리폰트변경Fastboot글자크기.PNG

티스토리 블로그의 글자체가 나눔고딕 폰트로 변경된 모습이다.


 

귀차니즘이신 분들을 위해 코드 첨부합니다.

티스토리 Fastboot 스킨 글자 크기와 나눔고딕 폰트로 변경하는 방법.txt
다운로드

 

 

 


 

2017/06/29 - [TISTORY tool] - 티스토리 임시저장 오류시 크롬chrome flags 플래시 사용설점됨 확인

2017/06/28 - [TISTORY tool] - Fastboot 스킨 설치 후 애드센스 페이지 수준 광고 재설정 방법

2017/06/13 - [TISTORY tool] - 수익도구 텐핑 모바일과 PC에 설치하는 방법

2017/04/23 - [TISTORY tool] - 티스토리 포토 업로드 안될 때 어도비 플래시 플레이어 다운받기

2017/01/19 - [TISTORY tool] - 티스토리 사이트맵 만들고 네이버 웹마스터도구에 제출하기

 

 

댓글