블로그 폰트 변경 등 디자인 소폭 수정

꽤 오래전 블로그를 네이버에서 무료로 배포하는 나눔고딕으로 변경한적이 있었는데

회사에서 보니 글자가 허접하게 보이더군요... 여러해동안 그랬던것이죠^^;;

그래서... 블로그 보는 컴에 나눔폰트 안깔려있어도 나눔폰트로 보이도록 수정을 했습니다.

또 블로그명, 글 제목, 태그 부분등의 폰트와 색상 변경 등 이것저것을 했네요.

제가 참고햇던 링크 보고 하시면 되구요.

제가 적용한 부분도 참고하시라고 조금 카피해둘께요.

css 제일 윗부분

@charset "utf-8";

@font-face {font-family:NanumGothic;

src: url(./images/NanumGothic.eot);

src: local("NanumGothic"), url(./images/NanumGothic.woff) format("woff");}

@font-face {font-family:NanumBarunGothicBold;

src: url(./images/NanumBarunGothicBold.eot);

src: local("NanumBarunGothicBold"), url(./images/NanumBarunGothicBold.woff) format("woff");}

@font-face {font-family:NanumBarunGothic;

src: url(./images/NanumBarunGothic.eot);

src: local("NanumBarunGothic"), url(./images/NanumBarunGothic.woff) format("woff");}

@font-face {font-family:NanumPen;

src: url(./images/NanumPen.eot);

src: local("NanumPen"), url(./images/NanumPen.woff) format("woff");}

......

.article{

       margin:15px 0;

       font:/*@post-body-font-size=*/14px/*@*/ /*@post-body-font-family=*/NanumGothic, 돋움, ,sans-serif,Arial/*@*/;

......

※ 블로그 초보자 분이거나 html css 편집이 서투른 분들은 Chrome 브라우저 사용하시기를 추천드립니다. 

화면의 부분에 오른 클릭후 요소검사 클릭하시면 해당 부분의 html 과 css 부분을 분석할수 있습니다.

그리고 html 이나 css 를 한 두군데가 아니라 여러군데 편집하실때는 윈도우즈 메모장이나 acroedit (무료) 등의 텍스트 에디터에서 편집하시는게 편하실거에요. 물론 수정작업에 백업도 해놓으시면 좋구요.

※ 블로그 폰트 변경과 관련하여 오늘 참고했거나 참고하진 않았지만 좋은 글들 링크 입니다.

티스토리 웹폰트 본문 과 제목 에만 적용하기

나눔고딕 다운(eot, woff, ttf) 및 적용방법 예

구글웹폰트 나눔폰트 적용하기

http://www.google.com/fonts/

웹 폰트 변환 툴(eot & woff)

나눔손글씨 폰트를 포스트 제목에 적용하는 방법