웹폰트를 깔아봅시다

새벽녘에 웹폰트 설치 관련으로 물어보신 분도 계시고 하여(그분은 그 뒤에 직접 해결하셨습니다만. ^^ ) 간단히 웹폰트 적용에 대해 이야기해볼까 합니다.

웹폰트는 인터넷상에서 무료로 배포되고 있는 것들 중에 예쁜 것들이 많으니 검색해보시면 될 듯합니다. 제가 설명에 쓸 파일은 http://typoenter.net/ 여기에서 가져온 것들입니다. : )

일단 받아둔 웹폰트 파일은 압축을 풀어 자신의 계정의 적당한 곳에 올려둡니다.
저같은 경우는 font라는 폴더를 만들어 그 안에 넣어두고 쓰고 있지요.

티스토리 계정을 가지고 계신 분들은 임시 포스팅을 하나 만드셔서 거기에 파일을 올리신 다음 공개하지 않은 채로 메인 화면으로 돌아와 위의 화면과 같이 파일에 마우스를 댄 채 오른쪽 마우스를 클릭하면 뜨는 속성에서 파일의 주소를 알아두세요.

스킨 폴더 안에는 위의 4가지 파일이 들어있습니다.

이 중에서 style.css 파일을 메모장에서 여신 다음

클릭해서 보세요.

이 부분에 @font-face **** 이런 식으로 웹폰트 파일이 들어있는 주소를 적어줍니다. 이렇게 해두면 style 파일 안에서 티티체, 솔잎체 라고 원하는 곳에 넣어주기만 하면 그 폰트를 불러오게 됩니다.

이제 웹폰트 설정은 끝났으니 이 웹폰트를 넣고 싶은 곳에 지정을 해주도록 하지요.

개인적인 취향으로는 웹폰트는 짧은 글이 있는 곳에 쓰는 게 예쁘더군요. : ) 긴 글 부분에 넣어도 가독성이 좋은 폰트가 있다면 좋겠는데 아무래도 팬시한 느낌들이 강해서 말이지요.
여기에서는 방명록 부분의 본문글에 지정해보도록 하겠습니다.

skin.html을 열어보시면 중간쯤의 방명록 본문에 해당하는 부분을 찾아봅니다.

이 부분을 긁어 카피한 다음 skin.html 파일을 메모장이나 에디터로 열어 '찾기'를 하면

이쯤에 있습니다.

앞쪽에 있는 div class='text2' 라는 말은 이 부분의 폰트 크기나 여러가지 설정을 스타일 파일에 있는 'text2'라는 부분에서 가져온다는 이야기입니다.
style 파일을 메모장에서 열어

01

그런 후 ftp로 수정한 파일을 올려주신 후 방명록으로 가서 확인해보면

이렇게 본문 부분의 폰트가 바뀌게 됩니다.

더불어, 제가 올려둔 스킨의 경우 스타일 파일에서 article 부분을 찾아 폰트와 사이즈 지정을 해주시면 포스팅 본문의 폰트가 변경됩니다.

이 웹폰트들은 9pt용 폰트로 10pt를 지정해준다거나 하면 깨져서 안 예쁘니 반드시 그 폰트 고유의 크기를 지켜서 써줘야 합니다. 한번 설정을 해주면 그 뒤로는 style 파일에서 쉽게 설정해줄 수 있으니 많이 번거롭지도 않고요. : )

참고로 파이어폭스에서는 웹폰트를 설정해도 보이지 않아요.