본문 바로가기

돈되는 블로그/블로그 관리

티스토리 블로그 웹폰트로 가독성을 올리자 - 두번째

<나눔고딕 적용화면>

 3. 티스토리 블로그에 적용
?
이제 생성된 소스코드를 사용하여 티스토리 블로그에 적용하겠습니다.

1) 웹폰트 파일 업로드
   블로그 관리자 페이지로 접속하신 후 스킨-HTML/CSS편집에 들어갑니다.

   파일업로드 탭을 선택하신 후 우측의 파일업로드를 클릭하여 줍니다. 그 후 원래 설정파
   일의압축을 풀어주신 폴더에 들어가시면 (저의경우 D:\web-fint\ 이경로에 압출해제)
   "DBFNT0.eot" 이 웹폰트 파일을 보실 수 있습니다. 그 후 열기를 누르셔서 웹폰트를 업
   로드 해주세요.

2) HTML/CSS설정 
   이제 마지막으로 블로그에 소스를 삽입만 하시면 됩니다. style.css설정에가시면
   @charset "utf-8"; 이부분이 존재합니다. 이 위에 아래의 소스를 넣어줍니다. *최상위
   빨간색으로 설정된 부분은 웹폰트의 경로를 결정하는 경로로 업로드하신 웹폰트 이름을
   DBFNTO.eot 이부분에 적용해주시면 됩니다. 파란색부분에는 위에서 기억하셨던 나눔
   고딕을 적어주시면 됩니다.

@font-face{font-family:나눔고딕; src:url(./images/DBFNTO.eot)}

 3) <Head>와 </head>사이에 아래 소스를 집어넣습니다.

<style type="text/css">
@font-face {font-family: 나눔고딕; src:url(./images/DBFNTO.eot);}
a:link {font-family: 나눔고딕;font-size: 10pt;}
a:visited {font-family: 나눔고딕;font-size: 10pt;}
a:hover {font-family: 나눔고딕;font-size: 10pt;}
a:acvite {font-family: 나눔고딕;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 나눔고딕;font-size: 10pt;}
</style>

 4) HTML설정에서 Ctrl+F로 <div class="article"> 이부분을 찾으신 후에  아래의 소스로 변
    경하여 줍니다. *<div class="article">이 소스가 두군데이신 분들은 꼭 두군데를
   다 바꾸셔야만 정상적으로 적용되오니 확인하시기 바랍니다!

<div class="article" style="font:12pt/150% 나눔고딕;">

  <소스파일 등록해드립니다. 파일을 여신 후 복사해서 사용하세요.>

* 소스를 제대로 적지 않으실 경우에는 적용이 잘 되지 않습니다. 필히 소스들을 잘 체크하시길 부탁드리며, 강조된 팁들을 잘체크하여 주시면 블로그에 소스가 잘 적용될 것 입니다. 문제사항이나 안되는 점 있으시면 댓글 달아주시면 해결해드리겠습니다.

티스토리 블로그 웹폰트로 가독성을 올리자 - 첫번째 바로가기

이 글이 마음에 드시면 추천부탁드립니다.