워드프레스 폰트 정복하기(@font-face)
매의눈입니다.
이번 포스팅은 저번 워드프레스 구글 웹폰트 적용 방법에 이어
두번째 폰트 변경 포스팅으로
@font-face 코드를 이용한 임의의 폰트 변경 방법에 대해서 알려드릴까합니다.
저도 워드프레스를 공부하는 입장으로서 하기 내용중 오류가 있는 부분이나
설명이 미흡한 부분에 대해서는 이해해주시면 감사하겠습니다.
해당 내용은 워드프레스 카페 (cafe.naver.com/wphome/) 및
구글검색을 통한 정보를 토대로 알려드립니다.
Chapter2. @font-face로 임의의 폰트를 워드프레스 적용하기
1) TTF(트루타입) 폰트를 준비합니다.
저는 다음체(바로가기)를 준비했습니다.
2) 브라우저 별로 폰트를 지원해주기 위해 ttf 폰트 파일을 otf, woff, svg, eot 포멧으로 컨버팅해줍니다.
<중요!! 폰트 포멧 컨버팅 방법>
1. http://onlinefontconverter.com/ 을 접속한다.
2. 우측 Drag&drop 박스에 TTF파일을 드래그앤드랍 또는 select files로 업로드해줍니다.
3. 업로드 된 TTF를 클릭하면 다른 폰트포멧으로 변경할 수 있는 conveting 화면이 랜딩됩니다.
eot, otf, svg, woff 문구를 각각 클릭해줍니다.
4. Download 박스에 컨버팅 된 폰트포멧이 생성됩니다.
클릭 후 다운받습니다.
5. 다운 받은 파일의 압축을 풀어주고
이제 폰트포멧들을 한 폴더에 모아줍니다.
저는 font 라는 폴더에 모았습니다.
<중요!! 폰트 포멧 컨버팅 방법 끝>
3) 폰트를 불러오기 위한 css파일을 생성해줍니다.
css파일은 하기와 같이 코드를 입력후 파일명.css로 저장해주시면 됩니다.
@font-face { font-family: 'Daum_Regular'; src: url('Daum_Regular.eot'); src: url('Daum_Regular.eot?#iefix') format('embedded-opentype'), url('Daum_Regular.woff') format('woff'), url('Daum_Regular.ttf') format('truetype'), url('Daum_Regular.svg#Daum_Regular') format('svg'); font-weight: normal; font-style: normal; }
4) 폰트포멧파일 5개 + css 파일까지 총 6개의 파일이 생겼습니다.
워드프레스 FTP에서 임의의 경로에 해당 폴더를 업로드해줍니다.
-> 저는 /www 최상위 폴더에 font 폴더를 업로드하였습니다.
5) 막바지입니다.
워드프레스 테마편집창에서 header.php 파일의 <head></head> 사이에
폰트.css 링크소스를 입력해줍니다.
<link href='http://kimbongjour.com/font/Daum_Regular.css' rel='stylesheet' type='text/css' />
전 위의 소스를 header.php에 입력했습니다.
6) 서버에 daum_regular 웹폰트가 생성되었습니다.
style.css 편집창에 font-face를 불러오기 위한 소스와
영역별로 폰트를 지정 후 저장합니다.
끝) 워드프레스 폰트가 다음체로 변경된 것을 확인 할 수 있습니다.
끝으로...
해당 방법은 서버에 폰트를 저장한 후 불러오는 것이기 때문에
해당 폰트를 갖고 있지 않은 사용자는 웹페이지 랜딩이
다소 느릴 수 있습니다.
또한 웹트래픽 양 또한 많이 잡아먹죠..
이런 저런 문제들 때문에 @font-face를 이용한 웹폰트 보다는
구글웹폰트를 이용한 나눔고딕, 나눔펜글씨 등등을 사용한답니다.^^;
위에도 말씀드렸지만 저도 워드프레스를 공부하는 사람으로서
잘못된 지식이 굉장히 많답니다.
올바른 정보로 지적해주시는 것은 감사하겠으나
무분별한 비난과 욕설은 삼가해주셨으면 합니다.^.^
워드프레스를 공부하는 매의눈이었습니다.
새해 복 많이 받으세요.
'Wordpress > 워드프레스 노하우' 카테고리의 다른 글
| 워드프레스 Kboard 깨짐현상 해결법 (1) | 2014.07.08 |
|---|---|
| 워드프레스 자식테마(Child Theme) 만들기 (3) | 2014.05.09 |
| 워드프레스에 네이버 라인 연동하기 (0) | 2014.04.21 |
| 워드프레스에 카카오톡 링크 연동하기 (3) | 2014.04.21 |
| 워드프레스 php소스에 숏코드에 넣기 (0) | 2014.03.05 |
| 워드프레스 폰트 정복하기(구글웹폰트) (4) | 2014.01.28 |
| 워드프레스 익스플로러 호환성 오류 해결방법 (31) | 2013.12.30 |
| 워드프레스에 트위터 타임라인 위젯 설치하기 (0) | 2013.09.03 |
| 워드프레스 유료테마 구입 시 주의사항 (5) | 2013.09.03 |
| 워드프레스 주소 뒤에 /wp 없애는 방법 (9) | 2013.08.06 |
