워드프레스 아리따 폰트 적용 방법

워드프레스 한글 폰트 적용에서 가장 많이 사용하는 것은 나눔고딕 입니다. 폰트 서체가 예뻐서라기보다는 구글의 Early Access 폰트에 등록되어있기 때문에 웹사이트에 적용하기가 쉽고, 그나마 기본폰트들인 굴림이나 돋움에 비해서 예쁘다고 평가받기 때문입니다. 만약 개인적인 취향이나 사이트 디자인의 목적상 다른 특정 한글 폰트를 사용한다면 워드프레스에서는 몇가지 절차가 필요합니다. 이를 설명하기 위해 아리따(Arita) 돋움 폰트를 대상으로 워드프레스 사이트에 적용하는 방법을 설명해 보려 합니다.
지극히 개인 적인방법이고 여러 가지 적용 방법이 있는 것이 워드프레스라는 탄력적인 툴입니다.
부디 참고로 사용하기 바랍니다.

아리따 돋움 폰트가 적용된 웹사이트 예) 한씨가원, 천수만 한울마루

아리따 글꼴 다운로드 받기

나의 웹사이트가 방문자의 브라우저에서 특정 글꼴로 나타나게 하려면, 그 방문자에게 해당 글꼴 파일이 있어야만 합니다. 만약 그렇지 않으면 나는 ‘아리따’ 폰트로 디자인을 했어도, 방문자의 눈에는 돋움이나, 굴림 등 기본폰트로 보이게 되는 것입니다. 이를 방지하기 위해서 특정 글꼴을 적용할 때 방문자의 브라우저에 해당 글꼴이 있는지를 체크하고 만약에 없다면 그 글꼴 파일도 동시에 공급합니다.
이 파일을 공급하는 방법이 아리따는 나눔폰트와 다릅니다. 나눔 글꼴은 구글에서 CDN으로 공급(구글이 폰트 파일을 직접 제공해 주므로 주소만 지정해 주면 페이지 로딩시 구글의 서버에서 가져옴)하고 있으므로 폰트 파일이 있는 곳의 링크를 가져오면 웹사이트에 적용할 수 있지만, 아리따 폰트는 따로 CDN을 공급해 주는 곳이 없기 때문입니다. 그래서 아리따 글꼴로 나의 웹사이트를 디자인하고 싶다면 사용자의 방문 시 나의 서버에서 직접 이 글꼴을 전달해야 합니다.

이렇게 하려면 먼저 아리따 글꼴을 다운로드 받아야 합니다.
정식으로 파일을 공급하는 곳은 아모레 퍼시픽 웹사이트이지만, 이곳에서 다운로드 받은 파일을 곧바로 워드프레스 웹사이트에 적용할 수 없습니다.
각종 브라우저의 호환성을 고려해 폰트 파일을 TTF,EOT,WOFF 파일로 준비해야 하기 때문입니다.

아래의 링크에 가서 미리 만들어 놓은 파일을 다운로드 받습니다.
아리따 폰트와 font-face 적용 CSS 파일 다운로드 받기

다운로드 받은 파일을 압축 해제하면 fonts 폴더가 있고, 그 안에 세 가지 종류(미디엄, 세미볼드, 볼드)의 아리따 글꼴이 위에서 언급한 세 가지 유형(TTF,EOT,WOFF)의 확장자로 있을 것입니다.

아바다 테마에서 테마옵션을 이용해 간단하게 적용하기

아바다 테마는 테마옵션을 통해 사용자 정의 폰트를 사용하도록 할 수 있습니다.
먼저 다운로드 받은 zip파일을 압축해제 하고, “테마옵션-타이포그래피-사용자 정의 폰트” 화면에 갑니다. 사용을 원하는 폰트(압축파일에는 medium, semibold, bold 세 가지 종류의 폰트가 있습니다.)를 선택해서 이름을 지정해 주고, 각 폰트 형식 파일(eot, ttf, woff)을 업로드 해 줍니다.

“Add”를 눌러 폰트를 추가하고, 브라우저를 꼭 새로 고침 합니다.
이후 업로드한 폰트를 사용하기 위해 “테마옵션-타이포그래피-본문 타이포그래피/헤딩 태그 타이포그래피” 옵션에 간 후 “Font Family” 옵션을 열어 보면, 최상단에 추가한 아리따 폰트가 나타납니다. 이것을 선택하면 사이트에 곧바로 적용됩니다.

아바다 테마 이외의 테마에서 적용하기

1)아리따 글꼴 계정에 업로드 하기

다운로드 받은 파일을 압축 해제한 후 나오는 fonts 폴더를 적용하고 싶은 웹사이트 계정에 FTP로 접속한 후 적당한 장소에 업로드 합니다. 설명은 당연히 차일드 테마를 사용 중이라는 가정하에 진행하겠습니다. ( 차일드 테마 사용방법 ) fonts 폴더 전체를 “http://본인의사이트도메인/wp-content/themes/본인의사용중인차일드테마/” 폴더에 올려놓습니다. 그리고 다음 코드를 차일드 테마의 functions.php 파일에 추가합니다.

 
add_action( 'wp_enqueue_scripts', 'arita_font_enqueue_styles' );     
        function arita_font_enqueue_styles() {                            
			  wp_enqueue_style( 'arita-font',get_stylesheet_directory_uri().'/fonts/arita.css');
		  }

워드프레스 웹페이지 로딩 시 현재 사용 중인 테마(차일드테마를 사용하고 있다 고 가정)의 폴더 속 fonts 폴더안에 arita.css 파일을 같이 로딩하라는 코드입니다.

2)웹사이트에 적용

사용 중인 테마마다 가능한 적용방법이 다르므로 딱히 어떤 방법을 사용하라는 것은 억지 인 것 같지만… 보통 차일드 테마의 style.css 파일에 다음 코드를 추가해서 사용하면됩니다.

body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family: Arita !important; }

아바다테마 사용자가 이 방식으로 적용해서 css에 직접 넣을경우, 아래의 코드를 사용합니다.

body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input {  font-family:IcoMoon, Arita !important; }

적용하고 싶은 HTML 태그만 넣으면 됩니다.

추가 font-weight 사용

아모레 퍼시픽에서는 다섯 가지 두께의 아리따 돋움 폰트를 제공합니다. 그렇지만 위에서 적용한 것은 font-weight(700,600,400)의 크기입니다. 만약 아리따에서 제공하는 나머지 두가지(light,thin) 폰트도 사용하고 싶다면 아모레 퍼시픽사이트에서 다운로드 받은 후, EOT,WOFF 파일 변환프로그램으로 나머지 파일들을 만들어서 같은 곳에 업로드한 후, 첨부된 arita.css 파일에 다음 코드를 추가하면 됩니다.

@font-face {
  font-family: 'Arita';
  font-style: normal;
  font-weight: 200;
  src: url('./Arita-Thin.eot');
  src: url('./Arita-Thin.eot?#iefix') format('embedded-opentype'),
       url('./Arita-Thin.woff') format('woff'),
       url('./Arita-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Arita';
  font-style: normal;
  font-weight: 300;
  src: url('./Arita-Light.eot');
  src: url('./Arita-Light.eot?#iefix') format('embedded-opentype'),
       url('./Arita-Light.woff') format('woff'),
       url('./Arita-Light.ttf') format('truetype');
}

마치며

어렵다면 어렵고, 쉽다면 쉽게 워드프레스 웹사이트에 ‘아리따’ 폰트를 적용해 보았습니다. 기존의 굴림이나 돋움체로 보이던 한글 사이트가 부드러워지는 효과를 대부분 보게 될 것입니다. 그런데 이 새로운 글꼴의 적용은 단점이 있습니다. 바로 큰 무게의 파일 전송이 초래하는 속도의 저하입니다. (위에서 설정한 폰트만으로도 첫 로딩 시 크롬브라우저의 경우 4.5메가바이트 를 더 받아야 합니다.) 물론 브라우저 캐시기능의 동작으로 첫 로딩 이후 크게 불편하지는 않겠지만… 사용자의 첫 방문 시 이 폰트 파일의 전송으로 웹사이트가 느리다는 인상을 받게 되면 (물론 디자인으로 만회하면 좋겠지만… ) 치명적인 단점이 될 수 있습니다.