웹사이트를 만들고 나서 운영하다보면 다른 웹사이트나 책, 광고에서 볼 수 있는 미려한 폰트에 대한 욕심이 생기기 마련입니다. 워드프레스 사이트에 간편하게 적용할 수 있고 일반적으로 많이 사용하는 폰트는 구글 폰트와 네이버 나눔 폰트가 있습니다.
구글은 폰트 서비스를 통해서 전세계의 여러가지 폰트를 제공하고 있습니다. 구글 폰트는 자신이 운영하는 서버나 자신의 PC에 폰트를 다운로드해서 설치하는 방식을 사용할 수도 있고 URL 링크 기반으로 불러오는 방식을 사용할 수도 있습니다. URL 링크 기반으로 불러오는 폰트 사용 방식을 웹폰트 라고도 합니다. 여기에서는 링크 기반의 구글 웹폰트를 사용해서 워드프레스 사이트에 적용하는 방법을 알아보도록 하겠습니다.
구글 폰트
구글 폰트는 많은 종류가 있습니다. 먼저 구글 폰트 서비스 사이트에 들어가서 자신의 사이트에 적합한 폰트를 찾아야합니다. 웹브라우져를 열고 구글 폰트 서비스 사이트에 접속합니다.
구글에서 아직까지는 한국어 폰트는 정식버전으로 제공되고 있지는 않습니다. 왼쪽 Script 항목의 콤보박스를 클릭해서 확인해보면 한국어 버전인 Korean 은 없는 것을 확인할 수 있습니다.
한국어 버전은 임시 서비스(Early Access)로 제공되고 있습니다. Early Access로 제공되는 폰트를 확인하기 위해서 오른쪽 상단 메뉴에서 More Scripts를 클릭합니다.
임시 서비스인 Early Access 폰트가 리스트업 됩니다.
명조체 관련된 한국어 폰트를 찾기 위해서 웹브라우저 화면에서 Ctrl + F 를 클릭해서 Korean을 입력하고 엔터를 칩니다. 아래로 내리다 보면 나눔 명조체인 Nanum Myeongjo 폰트가 검색됩니다.
구글은 구글 폰트를 사용할 수 있도록 링크와 사용 예제를 제공합니다. Link 부분과 Example 부분의 텍스트를 복사해서 메모장에 붙여넣습니다. 복사한 텍스트는 조금 뒤에 Custom CSS에 적용하는데 쓰일 것입니다.
워드프레스 사이트에 구글 폰트 적용하는 방법
먼저 자신의 워드프레스 사이트에 접속합니다. 아래 화면에서와 같이 슈만의 사이트에서는 고딕계열의 폰트체가 적용된 것을 확인할 수 있습니다.
이제 워드프레스 관리자 화면으로 들어와서 Custom CSS 방식으로 웹사이트 전체에 나눔 명조를 적용하겠습니다. 왼쪽 사이드바 메뉴에서 외모 > CSS 편집 메뉴를 클릭합니다.
CSS 스타일시트 편집기 화면이 나타납니다. 이곳에 구글 나눔명조 폰트를 CSS 스타일로 적용하면 Custom CSS 방식으로 웹사이트 전체의 폰트가 변경될 것입니다.
조금 전 구글 폰트 사이트에서 복사한 아래의 나눔명조 폰트의 텍스트를 CSS 스타일시트 편집기에 붙여서 사용할 것입니다. 그렇지만 아래 그대로 붙여넣으면 않됩니다. CSS 문법에 맞추어서 붙여 넣어야 합니다.
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
font-family: 'Nanum Myeongjo', serif;
구글 폰트 사이트에 복사한 텍스트를 아래와 같이 CSS 문법에 맞게 편집합니다.
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
body{ font-family: 'Nanum Myeongjo', serif; }
이제 편집한 텍스트를 CSS 스타일시트 편집기에 아래와 같이 붙여넣고 스타일시트 저장 버튼을 클릭합니다.
스타일시트가 저장되었습니다. 라는 메시지가 뜨고 import 구문이 맨 윗줄로 위치가 이동됩니다. 표준 문법에 따라서 위치가 이동되는 것이므로 코드의 위치는 신경쓰지 않아도 됩니다.
이제 구글 폰트가 제대로 적용되었는지 웹사이트에 들어가서 확인합니다. 웹사이트 전체 폰트가 나눔명조체로 적용되었습니다.
정확하게 소스 코드상에서 어떻게 적용하였는지 확인하기 위해서 마우스를 화면에 놓고 오른쪽 마우스를 클릭해서 뜨는 창에서 검사를 선택해서 HTML 소스코드 요소 검사를 실행합니다.
오른쪽 화면에 HTML 소스에 대한 요소 검사화면이 나타납니다. Ctrl + F를 클릭해서 검색창에서 Nanum 이라고 검색하면 아래와 같이 Custom CSS 스타일이 적용된 것을 확인할 수 있습니다. 나눔 명조체 말고도 구글 폰트 사이트에서 여러 종류의 폰트가 있으지 자신의 웹사이트 성향에 가장 적절한 폰트를 찾아서 적용하면 됩니다.
'워드프레스 > 워드프레스 관리자화면' 카테고리의 다른 글
| 그라바타 Gravatar 서비스로 아바타 만들기 (1) | 2015.12.09 |
|---|---|
| 토론 메뉴 댓글 설정하고 관리하기 (0) | 2015.12.09 |
| 사용자 추가하고 권한 부여하기 (0) | 2015.12.08 |
| 워드프레스 고유주소 슬러그 현명하게 사용하기 (0) | 2015.12.07 |
| 워드프레스에 구글 캘린더로 나만의 일정관리하기 (3) | 2015.11.30 |
