[컴퓨터팁] 맘에 드는 웹폰트(WOFF)를 추출해 TTF로 변환하기

---

같이가치 with kakao(https://together.kakao.com/) 페이지를 이용하다 보니, 이 사이트에서 사용되는 웹폰트가 딱 내 취향저격이라 탐나기 시작했다. 귀여움, 깔끔함, 세련됨, 가독성. 어느 하나도 꿀리지 않고, 매우 조화로운 훌륭한 폰트다. 특히 모바일로 볼 때 가독성 대박. 혹시라도 폰트가 시중에 있는지 알아봤으나, 카카오프렌즈 서체만 배포를 하고 내가 원하는 카카오체는 구할 수가 없었다. 그렇지만 포기할 내가 아니지… 내가 추출한 방법을 여기에 공유하고자 한다.

 

웹폰트 추출 방법

1. 설명은 구글 크롬 사용을 기준.
2. 원하는 사이트에 접속.
   (예: https://together.kakao.com/)
3. F12를 눌러 개발자 도구로 html 소스 확인.
4. Ctrl + F(검색창)에 ‘stylesheet’을 검색한다.
5. font라 적힌 파일에 웹폰트 정보가 있을 것으로 추정.
   (예: /assets/together-font-c9b206d5fff448502ce0dc52feedc12687f2253d7c92df75e5a930b30638ddc3.css)
6. 파일 상대경로에 기본 도메인까지 붙여서 css 파일을 오픈한다.
   (예: https://together.kakao.com/assets/together-font-c9b206d5fff448502ce0dc52feedc12687f2253d7c92df75e5a930b30638ddc3.css)
7. css 파일을 보면, font-family:’Kakao Light’ 폰트의 경우 ‘/assets/KakaoLight.woff’에서 불러온다는 것을 알 수 있다.
8. css를 다운 받을 때와 동일하게, 상대경로에 도메인을 추가해서 woff 파일을 다운(추출) 받는다.
   (예: https://together.kakao.com/assets/KakaoLight.woff)
9. 다운 받은 woff 파일을 바로 업로드 해서 웹폰트로 사용하던지 ttf로 변환해서 PC나 모바일에서 사용한다.

 

웹폰트를 트루타입폰트로 변환 (WOFF to TTF)

https://cloudconvert.com/woff-to-ttf

PC나 모바일에서 사용하기 위해 ttf로 변환하고 싶을 땐, CloudConvert 사이트를 통해를 쉽게 woff, ttf, eot 상호간 변환이 가능하다. 간단하고 직관적인 인터페이스를 제공하니 딱히 설명이 필요 없을 것이다.

 

추출한 웹폰트를 워드프레스에 적용하는 법 (Use Any Font)

이미 다운 받은 woff 파일을 Use Any Font WP Plugin을 사용해서 쉽게 적용할 수 있다. css를 잘 다루는 사람이라면 굳이 이 플러그인을 사용할 필요 없이 font-face 태그와 js를 사용해서 적용이 가능하다.

 

샘플로 추출해 본 ‘카카오체’

KakaoLight.ttf
KakaoRegular.ttf

 카카오 측에서 공식적으로 배포한 폰트가 아니라, 교육용으로 추출한 폰트이므로 상업적으로는 절대 사용하면 안되며, 비상업적인 용도로 쓰더라도 꼭 원저작자(Kakao Corp.)한테 허락을 받고 사용하길 권고한다.

 

혹시 카카오 측이 이 글을 보고, 저작권에 위배된다 판단되시면 이 링크를 통해 연락주시기 바랍니다. [CIA Foodie – Blog Disclaimer]