티스토리 블로그 제목 웹폰트로 적용하기

블로그 제목이 평범하거나 남들 다하는 물결플래시이면 식상하죠?
이제 개성만점 웹폰트로 블로그 제목을 꾸며봅시다!

그럼 준비해야할 것: 웹폰트 파일(.eot), 메모장

여기서 잠깐!
왜 일반 폰트 파일(ttf)가 아니라 웹폰트(eot)여야 하는지 알고 계시나요?
일반 폰트파일로 적용하면 그 폰트파일이 컴퓨터에 설치된 사람들에게만 보이는 것이랍니다.
간단하게 말하면, 일반 폰트파일로 적용하면 제 컴퓨터에서만 보이는 것.
하지만 웹폰트로 적용하면 모든 사람들(IE)에게 보이는 거에요~

자, 이제 웹폰트를 준비하셨나요?
제 블로그 제목에 적용된 폰트는 <나눔손글씨 펜체>입니다.
이제 이 폰트 위주로 포스팅하겠습니다.

1. 적용하고 싶은 웹폰트를 찾습니다.
제가 업로드할 폰트는 <나눔손글씨 펜체> 입니다.

np.eot

 

2. '관리자 페이지' - '스킨' - 'HTML/CSS' - '파일 업로드' 로 갑니다.
np.eot 를 '파일업로드'로 업로드 합니다.

 

3. 'HTML/CSS 편집' - 'style.css' 로 들어갑시다.
맨 윗부분에 "나는 이 사이트에다가 이 웹폰트를 적용하겠다!" 라고 써줘야 하는데요. 물론 이렇게 한국말로 써넣으면 컴퓨터가 못알아보겠죠?
밑의 파란 글상자에 있는 소스를 넣어줍시다.

넣을 소스.txt

 

@font-face{font-family:나눔손글씨; src:url(./images/np.eot); }

 

 

4. 이제 가장 난감한 부분인데요. 포스트 제목을 나타내는 부분이 스킨마다 다 달라서요.
일단 제 스킨 기준으로 설명하겠습니다만,, 보통 포스트 부분의 h2 정도일거에요.
(도저히 모르시겠다는 분들은 댓글에 질문해주세요^^)

찾으셨으면, 이제 타이틀 폰트를 나눔손글씨로 바꿔야 하는데요.
밑의 사진에서 드래그한 내용의 마지막 줄을 보시면 변경한거 보이시죠?
이런 식으로 본래 폰트에서 나눔손글씨로 바꿔주시면 됩니다.

 

저장하시면 모든게 다 끝났습니다!! 저장 안 누르시면 안돼요!!

자, 나눔손글씨가 적용된 모습입니다~

 

화질이 구리지만.. 최선을 다해서 설명했답니다 ㅎㅎ;;
이해가 안가시거나 적용이 제대로 안되시면 언제든지 댓글로 질문하세요^^