본문 바로가기

웹개발/워드프레스

워드프레스에 나눔고딕(나눔글꼴) 적용하기

워드프레스에 나눔고딕(나눔글꼴) 적용하기

워드프레스를 설치하고 한글을 사용하면, 기본적으로 굴림체와 바탕체 등이 설정되어 멋진 사이트의 디자인도 보기싫게(?) 바뀌어 버리고 맙니다.

그래서 많은 웹디자이너들이 사용하는 대안 중 하나가 이쁜 웹폰트를 적용시키는 것 입니다. 네이버에서는 나눔글꼴 시리즈를 제공합니다.

이 중 나눔고딕이 웹이나 모바일에서 볼 때 가장 깔끔한 디자인과 가독성을 보여주는 것 같습니다.

이제, 워드프레스에 나눔고딕(나눔글꼴, 나눔바른고딕)을 적용하는 방법을 간단하게 소개하겠습니다. 나눔바른고딕   네이버에서 제공하는 나눔글꼴(나눔고딕, 나눔바른고딕, 나눔명조 등)

 1. Google Font Early Access 사용하기

간단하게, 구글에서 "구글 폰트 나눔고딕"을 쳐도 가장 상위에 노출됩니다. 아래 화면은 구글 폰트 Early access 입니다.

Google Font Early Access 바로가기 : http://www.google.com/fonts/earlyaccess 1

  Control+F 키를 누른 후 나눔 을 치시면 페이지의 중간 쯤에 나눔 글꼴 시리즈를 적용하는 방법이 검색됩니다. 3

이 중에 "나눔고딕" 폰트를 워드프레스에 적용시켜 보겠습니다. 노란색 박스의 Link를 복사해 둡니다.  

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

 

 2. 워드프레스에 나눔고딕(나눔글꼴) 적용하기 워드프레스 관리자 화면으로 돌아와서, 외모 - 편집기를 선택합니다. 4

편집기를 선택하면, 가장 먼저 스타일 시트 에디터가 뜹니다.

스타일시트의 상단 중 적절한 위치에(저의 경우, 주석 */이 닫히는 다음 줄) 앞에서 복사한 Link를 붙여넣은 뒤, "파일 업데이트" 버튼을 클릭합니다.

이제, 구글 폰트를 스타일시트로 불러왔으니, 적용시켜야겠죠? 다시 스타일 시트 편집기에서 아래 코드를 @import ... 뒤에 붙여넣습니다.

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

이렇게 폰트를 설정하더라도, 위의 코드 아래에 새로 font-family가 적용된다면 나중에 나오는 값으로 글꼴이 바뀌어 버립니다. 그렇기 때문에, 원하는 스타일의 font-family에도 나눔고딕을 적용해야합니다.

자, 이제 마지막 단계만 남았습니다. 스타일시트를 "font-family"로 검색해서, 맨 앞에 'Nanum Gothic'을 추가해 줍니다. 6 모든 font-family를 찾아서 'Nanum Gothic'을 추가하셨으면, '파일 업데이트'를 클릭하시면 적용이 완료됩니다.