웹 폰트 설치 방법

플러그인으로 웹 폰트를 설치하여 이용할 경우 플러그인에서 제공하는 기본 태그 자동 생성 기능을 이용하여 사용할 수 있으나

홈페이지에서 웹 폰트를 이용하여 아이콘을 사용하고 있다면 추가 CSS 작업이 필요할 수 있습니다.

플러그인 설치 #

본 매뉴얼은 ‘글꼴 플러그인 | Google 글꼴, Adobe 글꼴 또는 업로드 글꼴 사용’ 플러그인을 예제로 했으며 다른 플러그인을 이용하셔도 무방합니다.

1. 웹폰트 플러그인 #

   관리자 메뉴 [플러그인 > 플러그인 추가]에서 ‘Google Fonts’를 검색한 후 지금 설치 버튼을 클릭하여 플러그인을 설치 및 활성화합니다.
   

2. 폰트 설정 #

   플러그인을 설치하면 폰트 메뉴가 활성화 됩니다.
   관리자 메뉴 [Fonts Plugin > 글꼴 사용자 지정]을 클릭하여 설정 페이지로 이동합니다.
   기본 설정, 고급 설정, WooCommerce 등 각 메뉴를 클릭하여 세부적으로 폰트를 지정할 수 있습니다.
   기본 설정에서는 기본, 제목, 버튼에 대한 폰트를 지정할 수 있으며, 우측 화살표 아이콘을 클릭하여 폰트 굵기와 서식을 설정할 수 있습니다.
   

구글 웹 폰트 이용 #

본 매뉴얼은 ‘Gowun Batang’ 폰트를 예시로 했습니다.

1. Google Fonts #

   Google Fonts 사이트로 이동하여 이용을 원하는 폰트를 검색한 후 우측의 Get Font 버튼을 클릭합니다.
   
   Get embed code 버튼을 클릭합니다.
   
   1번 영역에서 사용을 원하는 스타일을 선택한 후, 2번 영역에서 @import를 선택합니다.
   

2. 스타일 시트 추가 #

   
   1번 영역을 복사하여 차일드 테마의 style.css 또는 테마의 커스텀 영역에 추가합니다.
   
   CSS 파일에서 @import 링크 추가 시 아래에 추가하면 웹 폰트가 정상적으로 로드되지 않기 때문에 파일 상단에 추가해야 합니다.
   2번 영역을 참고하여 태그, id, class에 웹 폰트를 적용합니다.
   
   파일을 저장한 후, 사이트에 정상적으로 적용되었는지 확인합니다.

서버 업로드 방법 #

FTP를 통해 웹 폰트를 서버에 직접 업로드하여 처리하는 방식으로 FTP 접속 프로그램이 없는 경우 매뉴얼을 따라 설치 후 진행합니다.

본문은 ‘Nanum Square’ 폰트를 예시로 진행했습니다.

1. 웹 폰트 다운로드 #

   네이버 나눔 글꼴 모음에서 다운로드 아이콘을 클릭하여 나눔 스퀘어 웹 폰트를 다운로드 합니다.
   
   다운로드 후 파일을 확인하면 ttf 파일과 otf 파일 등 여러개의 파일을 확인할 수 있습니다.
   
   브라우저 별 웹 폰트 지원 상황이 다르기 때문에 폰트 파일을 브라우저 별로 변환해야 합니다.
   브라우저 별 웹 폰트 지원 상황은 아래와 같습니다.
   
   Font Converter 사이트에서 ttf 파일을 eot, woff, woff2 파일로 각각 변환해야 합니다.
   사이트 하단의 Convert from TTF 영역에서 각 형식으로 변환할 수 있습니다.
   
   ttf 파일을 업로드하여 CONVERT 버튼을 클릭합니다.
   
   변환 완료 후 DOWNLOAD 버튼을 클릭하여 변환 완료된 파일을 다운로드 합니다.
   
   다운로드한 파일명의 AnyConv.com__ 부분을 모두 삭제합니다.
   

2. 웹 폰트 서버 업로드 #

   FTP 프로그램을 이용하여 사이트에 접속한 후 /wp-content/uploads 경로에 fonts 폴더를 생성합니다.
   ttf, eot, woff, woff2 파일을 모두 fonts 폴더에 추가합니다.
   
   차일드 테마의 style.css 또는 테마의 Custom CSS에 아래 코드 중 1번 영역을 추가합니다.
   아래 경로는 차일드 테마의 style.css 파일 기준이며, Custom CSS 또는 다른 CSS 파일에 추가할 경우 경로가 달라질 수 있습니다.
   태그, ID, Class 등 필요한 곳에 2번 영역 코드를 참고하여 웹 폰트를 적용합니다.
   

   @font-face {
       font-family: 'NanumSquareL'; // 사용할 웹 폰트의 이름입니다.
       src: url(/wp-content/uploads/fonts/NanumSquareL.eot); // IE9 Compat Modes
       src: url(/wp-content/uploads/fonts/NanumSquareL.eot?#iefix) format('embedded-opentype'), // IE6-IE8
       url(/wp-content/uploads/fonts/NanumSquareL.woff2) format('woff2'), // Super Modern Browsers
       url(/wp-content/uploads/fonts/NanumSquareL.woff) format('woff'), // Pretty Modern Browsers
       url(/wp-content/uploads/fonts/NanumSquareL.ttf) format('truetype'); // Safari, Android, iOS
       font-style: normal; // 웹 폰트의 스타일입니다.
   }