워드프레스 폰트 정복하기(구글웹폰트)

워드프레스 폰트 정복하기(구글웹폰트)

안녕하세요. 매의눈입니다.

오늘은 간만에 워드프레스 관련 팁을 알려드릴까합니다.

주제는.. 워드프레스 폰트 정복하기!

워드프레스 폰트 관련해서 검색해보시면 구글웹폰트니...

모빌리스니.. 헷갈리고 머리 아픈 분들이 많을겁니다..

그래서 제가 조금이나마 이해를 돕기위해 최대한 쉽게 

워드프레스 폰트 변경에 대해서 알려드리겠습니다.

워드프레스 폰트 정복하기

Chapter1. 구글웹폰트로 변경하기.

1) http://www.google.com/fonts/earlyaccess 로 접속합니다.

2) Ctrl+F 찾기기능으로 나눔글꼴을 검색합니다.

3) 나눔고딕 글꼴 내용중 "Link" 박스에 있는 내용을 복사합니다.

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

4) 워드프레스 테마편집창에서 style.css 또는 custom.css 에 해당 내용을 붙여넣기합니다.

(※ 저는 워드프레스 기본 테마인 Twenty Fourteen 테마를 사용하기에 style.css에 코드를 넣었지만

다른 유료테마는 테마옵션의 custom.css 영역에 해당 코드를 넣어주면 됩니다.)

5) 폰트를 변경하고자 하는 영역을 지정해주고 font-family: 'Nanum Gothic'; 으로 설정해줍니다.

(위 구글웹폰트 사이트에서 example을 그대로 복사하시면 됩니다.)

전 이런식으로 style.css 에 코드를 넣어줬습니다.

끝) 아래 사진과 같이 폰트가 '나눔고딕' 폰트로 변경되는 것을 보실 수 있습니다.

다음 포스팅은 @font-face를 이용한 웹폰트 적용방법에 대해 포스팅하겠습니다.

워드프레스 공부하는 매의눈이었습니다.

Chapter2. 워드프레스 @font-face를 이용한 웹폰트 적용 바로가기