워드프레스 홈페이지에 한글폰트 적용하는 방법

워드프레스 홈페이지를 만들다 보면 워드프레스에 한글 폰트를 적용하고 싶을 때가 있죠?

 

그래서 워드프레스에 한글웹 폰트를 적용하는 방법을 알아볼까 합니다.

 

*웹폰트는 폰트가 설치되어 있지 않더라도, 웹 폰트를 지원하는 사이트에서 폰트를 전송하여 자신의 웹브라우저에서 보여주는 폰트를 말합니다. 한글 웹 폰트를 지원하는 사이트로는 다음 두 사이트가 대표적입니다.

 

 

모빌리스: http://api.mobilis.co.kr/webfonts

 

폰트페이스 : http://www.fontface.kr

 

 

 

폰트페이스는 브라우저에 따라서 지원이 안되는 경우가 있어서 모빌리스로 해보겠습니다.

 

웹폰트 적용 순서는 다음과 같습니다.

 

1. 사이트에서 폰트를 변경할 위치를 확인한다. ,

2. header.php에 웹 폰트를 설정한다. 

3. style.css 소스의 폰트를 변경할 위치에 폰트 추가한다. 

4. 사이트에서 변경된 폰트를 확인한다. 

 

워드프레스에서 폰트를 변경할 위치를 확인해보겠습니다.

 

크롬, 파이어폭스의 경우 요소검사. 익스플로러 9는 개발자 도구를 이용하여 변경할 부분의 위치를 확인 합니다.

 

워드프레스 홈페이지에서 제목에 커서를 대고 마우스 오른쪽 버튼을 눌러 요소검사를 선택 합니다.

font1

 

아래 요소검사 창에서 코드 위치를 확인 합니다.

 워드프레스의 글 제목을 변경해 보겠습니다.

 

font2

 

파란색으로 선택된 윗부분에서 class 이름을 확인 합니다.

저는 ‘entry-title’ 로 되어 있네요.

 

이제 워드프레스 편집기로 이동해서 코드를 수정해 보겠습니다.

웹폰트 사이트에서 워드프레스 홈페이지로 폰트를 전송하는 코드 입니다.

header.php 파일(또는 head.php)에서 </head> 태그 안에 다음 코드를 추가 합니다.

저의 워드프레스 홈페이지에서 사용 할 ‘나눔고딕 굵게’ 폰트 입니다.

 

 <link href=’http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicBoldWeb’ rel=’stylesheet’ type=’text/css’ />

 

추가 후에 파일 업데이트 눌러서 저장 해줍니다.

 

font3_1

 

다음으로 워드프레스 홈페이지의 css 파일에서 폰트를 변경해 보겠습니다.

style.css 파일에서 ‘entry-title’을 검색 합니다.

 

‘{‘ 다음에 다음 코드를 추가해 줍니다.

font-family: “NanumGothicBoldWeb”;

 font5

코드 추가가 완료 되면 파일 업데이트를 눌러서 저장해 줍니다.

변경된 폰트를 크롬 플러그인 ‘what font’로 확인해 볼 수 있습니다.

font6

위와 같은 방법으로 워드프레스 홈페이지에 잘 어울리는 한글 폰트를 추가해 줄 수 있습니다.^^

 

출처 : 워드프레스홈페이지 네이버카페  재영님의 글 ( http://cafe.naver.com/wphome/4800)

 

Share the Post

About the Author

Comments

No comment yet.


Warning: strpos() expects parameter 1 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 190

Warning: preg_match() expects parameter 2 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 201
Leave a Reply

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

Cart

  • No products in the cart.

Login