상세 컨텐츠

본문 제목

웹폰트 적용하기.

program/웹2.0

by seongchan 2013. 7. 3. 14:15

본문

웹브라우저 글꼴 설정에 따라서 보이는게 다르다.

이게 그리 불편한건 아닌데, 간혹 가다 워드프레스에서 한글 글꼴에 잡음이 섞여 보일때가 종종 있다.

(주로 맥환경에서 그런 경우가 종종 있음)


이를 해결하기 위해서 부득이하게 웹폰트를 적용해 보았다.

방법은 여러가지이지만, 내가 선택한 방법은 구글에서 제공하는 웹폰트이다.


방법 : 나눔 고딕을 페이지 본문에 적용하고자 할때 (붉은색 부분이 추가하는 내용)


style.css 파일 앞쪽에 


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


를 추가한다.


그리고 글꼴을 적용하고자 하는 tag에 나눔글꼴 이름을 추가한다.


body {

 ....

font-family: 'Nanum Gothic', sans-serif;

...

}


나눔글꼴류를 사용하고자 한다면, 아래의 사이트를 참고할 것.

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


영문 글꼴을 차용하고 싶다면 아래의 사이트에서 쓸만한 폰트들을 골라서 사용하면 된다.

http://www.google.com/fonts


그리고 세부적인 설정에 대한 사항은 역시 아래의 사이트에서 참고

https://developers.google.com/fonts/docs/getting_started


html 과 css에 대해서 대략적인 이해만 있다면 적용하는데에는 문제가 없다.


워드프레스에서 제일 쉬운 방법은 css파일만 수정해서 쓰면 되는데, 

현재 사용하고 있는 테마에서 style.css파일을 열고 다음의 방법으로 파일을 수정한다.


관련글 더보기

댓글 영역