국내 홈페이지의 경우 한글 폰트는 나눔고딕이나 맑은고딕이 많이 사용되고 있습니다. 워드프레스에서 폰트 적용방법은 구글 폰트를 통해 이용하시기 추천합니다. 직접 자신이 운영하는 호스팅에 폰트 파일을 올려 적용시킬 수 있지만 해당 폰트의 용량만큼 트래픽이 늘어나고 속도에도 좋지 않은 영향을 끼칩니다.
제가 사용하는 구글 폰트 적용법은 WP Canvas – Insert Code 플러그인을 설치하고 아래와 같은 소스를 추가해주는 방법입니다.
|
1 2 3 4 |
<style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ); body,li.p.select,input,option,button,h1,h2,h3,h4,h5,h6,a { font-family:"Nanum Gothic" !important; } </style> |
설명하자면 나눔고딕을 불러낸 후 body 부터 ~ a태그까지 거의 모든 영역에 font-family를 나눔고딕으로 사용하고자 하는 소스입니다.
참고로 웹 폰트가 적용되는 원리는 홈페이지 접속 순간 사용자의 컴퓨터에 폰트파일을 최대한 빠르게 다운시킨 후 지정된 폰트를 사용자의 컴퓨터에서 보여 지게끔 만드는 것 입니다. 이는 html로 이루어진 웹이 사용자들에게 보여 지는 기본 원리기도 합니다.
폰트를 2개 이상 적용하는 방법은 폰트파일을 추가로 불러내고 원하는 글자가 갖고있는 속성에 사용하도록 지정해 주면 됩니다.
아래는 h3 태그를 사용하는 글자만 다른 폰트를 적용할때의 예 입니다.
|
1 2 3 4 5 6 |
<style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ); @import url("http://fonts.googleapis.com/earlyaccess/원하는다른폰트.css" ); body,li.p,select,input,option,button,h1,h2,h4,h5,h6,a { font-family:"Nanum Gothic" !important; } h3 { font-family:"원하는다른폰트" !important; } </style> |
‘원하는 다른 폰트’는 해당 폰트의 파일명과 font-famliy 명칭을 적어주면 됩니다. 아래주소에 접속해 보시면 지원되는 구글폰트를 확인하실 수 있습니다.
(http://www.google.com/fonts/earlyaccess)
참고로 스타일시트 정의 시 앞에 점을 찍고 지정하면 자신만의 Class를 만드는 것이고 점이 안 찍혀있는 Class는 body나 li와 같이 기본 태그에 일괄적으로 적용한다는 의미입니다. 스타일시트에서 .font123이라는 클래스를 생성했을경우 <li class=’font123′>글자</li> 와 같이 사용하면 됩니다. Class를 2개 이상 사용시에는 <li class=’font123 font1234’> 이런식으로 중 띄어쓰기 후 입력하면 됩니다.
이상 여러 개의 폰트를 적용하는 방법 이였고 폰트를 2개 이상 사용할 경우 홈페이지에 적용되는 속도가 느려질 수 있다는 점은 염려하시기 바랍니다.
– 작성자 : 웹 마스터 이행관
No Comments