워드프레스에서 적용할 수 있는 무료 테마든, Themeforest에서 구매한 유료 테마든 영문 워드프레스에서는 정말 멋진 디자인을 자랑(?)하지만, 한글로만 바뀌면 전혀 다른 사이트가 돼버리고 말때가 많죠.

그래서 많은 워드프레스 사용자들이 선택한 대안 중 하나가 바로 ‘웹폰트’. 특히 네이버의 ‘나눔고딕’입니다.

오늘은 워드프레스 사이트에 나눔고딕을 적용하는 가장 쉬운 방법에 대해 알아보도록 하겠습니다.

작업 시간: 30분
준비물: 구글 크롬

1. 구글 폰트: 얼리 액세스(Google Fonts: Early Access) 접속하기

구글에서 다양한 무료 웹폰트를 제공하고 있다는 것은 모두 알고 계실텐데요. 하지만 한국어, 타이어, 아랍어 등 영어를 제외한 다양한 언어의 웹폰트를 제공하고 있지는 못한 것이 현실입니다.

하지만 구글에서도 몇 년 전부터 나눔글꼴을 얼리 액세스를 통해 제공하고 있습니다. 아마도 많은 한국 분들께서 한글 대표 무료 글꼴인 ‘나눔고딕’을 웹폰트로 사용하고자 구글에 메일도 보내고 포럼에 의견도 남긴 분들 덕분이지 않을까 싶습니다. 물론 그 중에 저도 속하고요. ^^

google_early_access

구글 폰트 얼리 액세스 바로가기

구글 폰트 얼리 액세스 페이지에서 하단으로 쭈욱 내려가다보면 나눔글꼴 시리즈를 쉽게 찾을 수 있습니다. 구글에서 제공하는 나눔글꼴은 총 5종으로 ‘나눔 고딕, 나눔 고딕 코딩, 나눔 명조, 나눔 브러쉬 스크립트, 나눔 펜 스크립트’입니다.

저는 그 중에서 ‘나눔 고딕’으로 선택하도록 하겠습니다.

 

2. 워드프레스 코드 수정하기

nanumgothic

위 이미지 중에서 Link(링크)에 해당하는 부분을 미리 복사해 둡니다.

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

그 후 워드프레스 관리자에 접속, 외모(Appearance) ▶ 편집기(Editor)를 클릭합니다.

editor

편집기를 클릭하면 가장 먼저 편집하는 파일이 바로 현재 테마의 스타일시트인 ‘style.css’ 파일입니다. (테마의 형식이 보다 복잡한 테마일 경우를 제외하고는 대부분 style.css파일을 편집하면 되겠습니다.)

미리 복사해둔 코드를 style.css 파일의 아무곳에 복사해줍니다. 제 경우 테마 설명 바로 아래 부분에 붙여 넣었습니다.

editor_paste

완료 하셨다면 ‘파일 업데이트’ 버튼을 눌러 스타일시트를 저장합니다.

여기까지 완료하셨다면 이미 반은 성공한 셈입니다. ^^

이제 마지막 단계로 넘어가보겠습니다.

 

3. CSS 수정으로 실제 적용하기

코드를 수정하고 블로그 메인화면으로 이동했으나 아무 변화가 없네요. 그 이유는 CSS를 수정하지 않았기 때문입니다.

blog

먼저 로고 부분의 폰트부터 수정해보겠습니다.

키보드의 ‘F12’ 버튼을 클릭, 개발자도구를 활성화 하면 아래와 같은 창이 하단에 나타나게 됩니다. 다음으로는 개발자도구 상단에 위치한 ‘돋보기’ 아이콘을 클릭합니다.

tools

‘돋보기’ 아이콘 클릭 후 마우스를 이리저리 움직여 보면 하늘색, 주황색 등의 박스가 나타나는 것을 알 수 있습니다. 로고 부분 폰트 수정을 위해 로고 부분을 클릭해줍니다.

개발자 도구는 쉽게 말해 웹사이트의 코드를 확인하고 그 코드를 변경하면 웹사이트가 어떻게 변화하는지 눈으로 쉽게 확인할 수 있게 해주는 도구입니다.

tools_02

로고를 클릭하면 아래 개발자도구 우측 하단에 아래와 같은 태그가 나타날텐데요. 여기서 우리가 제가 수정할 부분은 ‘.site-header h1 a’ 부분입니다. 얼핏 봐도 사이트의 ‘헤더 부분에 위치한 Heading 1의 링크’라는 것을 직관적으로 알 수 있죠?

tools_03

이 부분을 나눔고딕으로 변경해보겠습니다. 아래와 같이 ‘.site-header h1 a’ 부분의 빈공간 아무데나 클릭하시면 텍스트를 입력할 수 있도록 커서가 변경됩니다.

tools_04

여기에 아래와 같은 코드를 넣어보세요.

font-family: 'Nanum Gothic', 굴림, Gulim, 돋움, Dotum, Arial;

입력하면 아래와 같겠죠?

tools_05

제대로 입력했다면 아래 그림과 같이 제목 부분의 폰트가 나눔 고딕으로 변경된 것을 알 수 있습니다.

tools_06

여기서 끝이 아닙니다. 현재 적용한 부분을 실제 style.css 수정을 거쳐 적용해야하기 때문입니다.

다시 외모(Appearance) → 편집기(Editor)로 이동합니다.

좀전에 입력한 코드를 style.css에 넣어주면 되는데요. ‘font-family:….’ 부터가 아닌 ‘.site-header…’ 부터 입력해야 한다는 것이 중요합니다. 아래 코드를 복사해 최초 구글 폰트 얼리 액세스를 통해 확인한 코드 하단 부분에 붙여넣어주세요.

.site-header h1 a { font-family: 'Nanum Gothic', 굴림, Gulim, 돋움, Dotum, Arial; } 

아래와 같이 적용하시면 됩니다.

editor2

자 이제 웹사이트로 돌아가 페이지를 새로고침 해 보세요! 폰트가 수정된 것을 확인하실 수 있을거예요.

참고로 제가 테스트로 사용한 Twenty Twelve 테마의 나눔 고딕 용 style.css 파일은 아래와 같이 단 한줄만 추가해도 나눔고딕으로 워드프레스를 이용할 수 있으니 참고하세요~

* { font-family: 'Nanum Gothic', 굴림, Gulim, 돋움, Dotum, Arial; }