워드프레스에서 웹폰트 사용을 위한 플러그인 설치 및 사용법

워드프레스 테마에 웹폰트를 적용하기 위해서는 스타일시트(style.css)를 수정하는 방법이 있는데 이 방법의 단점은 테마가 바뀌면 다시 해당 코드를 바뀐 테마의 스타일시트에 적용해야 한다는 것입니다. 이런 작업이 번거롭다고 느낀다면 폰트 플러그인을 사용하면 반복작업 필요없이 한번만으로 기본 폰트를 웹폰트로 적용해 놓을 수 있습니다.

 

이번에는 플러그인을 이용해서 한글폰트 나눔고딕과 영문폰트 Open Sans를 설치해 보겠습니다.

 

페이지를 클릭해 보면 '샘플 페이지'가 있는데 '편집' 을 클릭해 봅니다.

 

여기에서는 기본 폰트만 적용되어 있기 때문에 내가 설치하고자 하는 폰트는 찾을 수 없습니다.

 

국내 테마 제작사나 플로그인 제작사에서 웹폰트를 제작해서 배포 합니다. 단비 스토어 라는 테마 제작사가 'PAVP Webfonts(PAVP 웹폰트)' 라는 폰트를 무료로 제공하고 있습니다.

 

회원가입을 하고 다운로드 받으면 내 컴퓨터에 압축파일이 다운받아 집니다. 이때 'danbi-manager'와 'pavo-webfonts' 라는 플러그인 두개를 다운로드 받아야 합니다.

 

다운받은 플러그인 두개를 워드프레스 관리자 화면에서 설치해 주면 됩니다.

 

플러그인 < 플러그인 추가하기 로 들어갑니다.

 

'플러그인 업로드' 버튼을 클릭해 주면 플러그인 업로드 페이지가 나오는데 여기서 '파일 선택' 버튼을 클릭해 줍니다.

 

지금 다운받은 압축파일 중에 'pavo-webfonts'를 내 컴퓨터에서 찾아서 열기 합니다.

 

'지금 설치하기' 버튼을 눌러 줍니다.

 

그리고나서 '플러그인을 활성화' 버튼을 눌러서 플러그인을 활성화 시켜 줍니다.

 

이렇게 하면 상단에 '단비 매니저' 플러그인도 같이 설치해야 된다는 메시지가 뜹니다.

 

다시 '플러그인 추가하기' 에서 내 컴퓨터에서 '단비 매니저'를 찾아서 위와 같은 순서되로 플러그인을 설치하고 활성화 시켜 줍니다.

 

플러그인 페이지에서 이렇게 플러그인이 추가된 것을 확인 할 수 있습니다.

 

다시 페이지에서 샘플 페이지를 보게 되면 현재 폰트 패밀리에 기본 폰트외에는 아무것도 없는데 여기에 웹폰트를 추가해 보겠습니다.

 

추가하는 방법은, 설정 > 웹폰트 로 들어 갑니다.

 

기본 옵션 탭에서 활성화/비활성화를 체크 해주고 모바일 활성화에서도 웹폰트를 사용한다고 체크표시를 하고 변경사항을 저장 합니다.

 

폰트 선택 탭에 가서 원하는 폰트를 선택하면 됩니다. 저는 '나눔고딕'과 'Open Sans'를 선택해서 추가해 보겠습니다. 원하는 웹폰트를 선택한 다음 '변경 사항 저장' 버튼을 클릭해 줍니다.

 

확인해보기 위해서 다시 페이지로 가서 샘플 페이지에 편집을 눌러서 폰트 패밀리를 보게 되면 '나눔고딕'과 'Open Sans'가 추가되어 있는 것을 볼 수 있습니다.

 

샘플 페이지에 있는 텍스트 중 일부를 '나눔고딕'이나 'Open Sans' 를 적용해서 업데이트를 하게되면 사이트에 적용이 됩니다.