나눔고딕 글씨체를 적용하여 티스토리를 꾸며보자.

티스토리 나눔고딕

 

요즘 티스토리 블로그 꾸미는 재미에 빠졌는데요. 고수 분들이 보실때에는 완전 초보적인 것이지만, 모르던 것을 알아간다는 재미가 솔솔하네요.

 

그치만 - 적용은 안한다는게 함정..ㅋ

 

서론은 그만하고 - 지금부터 티스토리 글씨체 바꾸기를 시작하도록 하겠습니다.

변경 할 글씨체는 나눔 고딕체 입니다.

 

첨부 파일을 받아 주세요. -NanumGothic.eot

 

다운 받으신 후 HTML/CSS 편집 - 파일 업로드에 추가 해주시면 됩니다.

이부분에 대해서는 따로 언급하지 않겠습니다. ^^

 

상기와 같이 파일 업로드를 했다는 가정 하에..

 

1. HTML/CSS 편집 - skin.html 항목에서 컨트롤 + F(찾기) 하신 후 <title>부분을 찾습니다.

 

2. 다음 항목을 복사 하신 후 방금 찾으신 <title> 바로 밑에 입력해 주시면 됩니다.

 

<style type="text/css">
@font-face {font-family: 나눔고딕; src:url(./images/NanumGothic.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>

 

사진 상으로 보시면, 흑백 부분으로 처리 된 곳입니다.

 

 

 

---

 

2. 앞과 동일하게 컨트롤 + F(찾기) 하신 후 <div class="article">  검색합니다. 사진 상으로는 화살표 부분입니다.

 

---

 

3. <div class="article"> 선택 된 부분의 소스 코드를 <div class="article" style="font:10pt 나눔고딕;"> 코드로 변경합니다.

 

사진 상으로는 흑백 부분으로 처리된 부분입니다. 앞선 2번 항목과 다르게 소스가 다름을 확인 할 수 있습니다.

 

4. 마지막으로 style.css 항목에 다음에 소스를 맨 앞줄에 추가 시킨 후 저장 하시면 됩니다.

 

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

 

 

---

 

본문에 나오는 소스가 복사가 되지 않는다면, 모바일 버전으로 변경해서 복사하시면 됩니다.

 

모바일로 접속하기  /  지금까지 티스토리 글씨체 바꾸기 였습니다.