워드프레스 웹폰트 적용방법(나눔고딕,구글웹폰트 기준)

1.사용할 글꼴 확인

- 웹을 만드는데 가장 많이 사용되는 한글 글꼴은 굴림,맑은고딕,나눔고딕 등등인데요.

- 굴림과 맑은고딕은 기본폰트라서 어느 컴퓨터에서는 쉽게 적용할 수 있습니다.

  (다만 XP설치하고 바로 사용하는 컴퓨터에서는 맑은고딕X)

- 나눔고딕은 예쁘기는 하지만 웹폰트 자체의 단점이 있죠.

  : 페이지 로딩시에 기본글꼴로 보였다가 나눔고딕으로 표시됩니다.

  : 자신의 서버에 웹폰트 파일을 놔둘경우 속도저하가 있습니다.

  : 브라우저별 굵기나 자간등이 다르게 표시 될 수 있습니다.

- 이 부분을 잘 확인하시고 웹폰트를 선택하는게 좋습니다.

2.한글글꼴 선택?

- 기본폰트와 나눔고딕을 제외한 폰트는 한글웹폰트로 만들어서 사용하는것은 비추합니다.(영문폰트도 마찬가지)

  :예전 Myriad Pro를 웹폰트로 사용하려고 변환만 수십번 한것 같네요

- 웹폰트 변환프로그램을 돌려 파일을 얻는다해도 브라우저에 따라 적용불가능한 경우가 너무 많고

   일일이 확인해 줘야 합니다.

3.구글 폰트 활용

- 저 같은 경우는 한글폰트는 나눔고딕을 사용하고 영문폰트를 구글폰트를 활용합니다

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

위 사이트에 접속하면 다음과 같이 여러 폰트가 있습니다.

(Open Sans,Pt Sans 등 예쁜폰트가 많습니다)

빨간 화살표를 누르면 웹사이트에서 바로 사용가능한 웹폰트 링크로 이동합니다.

자 이제, 사용할 폰트 두께와 폰트를 선택하고, <link href="~~~~~~~"> 이부분을 복사합니다.

복사한 부분을 워드프레스 header.php파일을 열어 </head>바로 윗부분에 붙여넣어 줍니다.

소스 보기를 통해 잘 들어갔는지 확인한후 아래 font-family부분을 복사하여 수정을 원할곳의 CSS를 추가합니다.

4.나눔고딕 폰트 적용

나눔고딕 폰트 적용을 위해서 다시 구글폰트 첫페이지로 돌아갑니다.

오른쪽 상단에 More scripts를 클릭합니다.

Ctrl+F 를 눌어 검색하거나 조금만 스크롤해보면 Nanum Gothic이 있습니다.

@import~~~~~부분을 복사하여 워드프레스 style.css파일이나 스타일파일의 최상단에 넣어줍니다.

font-family~~ 부분을 복사하여 폰트 변경을 원하는곳 요소의 CSS를 추가해줍니다.

이제 폰트 변경이 되었는지 확인합니다.

안되었을시 다음을 확인합니다.

1.복사하기 붙여넣기가 잘되었으며 </head>의 바로 윗부분이나 style파일의 최상단에 위치하고 있나?

2.font-family 속성이 잘 적용되어 있나?

3.모두 잘되었지만 css의 다른 폰트속성때문에 무시되고 있지는 않나?

  (이럴경우 font-family:'Nanum Gothic' !important; 넣어주면 됩니다.)