웹에서 웹폰트를 만들자.

웹폰트를 웹에서 변환해주고 코드까지 생성해주는 아주 유용한 사이트가 있어 소개를 합니다.

http://www.fontsquirrel.com/fontface/generator

폰트스쿼럴? 사이트명이 좀 독특한데 실행 파일 형식의 프로그램을 따로 받지 않고 웹에서 폰트 변환과 코드를 생성해준다는 것은 정말 너무 감사해야할 것 같습니다. 

화면에 보시면 Add Fonts라는 검은색 버튼이 있습니다. 클릭하시면 오른쪽 처럼 폰트파일을 선택할 수 있는 대화상자가 열리게 됩니다. 원하시는 폰트 선택하시고 열기버튼을 눌러주세요. 저는 나눔고딕라이트를 선택했습니다.

업로드 진행 표시가 표시되고 업로드가 완료되면 푸른색 배경의 줄이 위 그림처럼 추가 됩니다. 나눔고딕라이트 라는 이름이 보이시죠? Agreement라는 부분에서 체크를 꼭 해주셔야지 아래  Download Your Kit이라는 버튼이 보입니다. 흔히 설치 프로그램에서 볼 수 있는 동의합니까? 하는 내용입니다.

BASIC, OPTIMAL, EXPERT 선택 버튼을 보실 수 있는데 EXPERT는 전문가라는 뜻으로 선택하시면 아래 그림처럼 매우 다양한 옵션을 설정할 수 있습니다. 귀찮으시다면 그냥 가운데 OPTIMAL을 선택하시면 됩니다.

Download Your Kit을 클릭하시면 변환된 폰트 파일과 코드가 포함된 HTML 파일이 ZIP으로 압축되어 내려받게 됩니다. 시간이 약간 소요됩니다. 다운로드가 완료되었으면 압축을 풀어서 살펴볼까요? 

파일들이 꽤 많군요. 이 파일들에서 주목해야할 파일들은 확장자가 EOT, WOFF, SVG인 폰트 파일과 스타일시트인 CSS 확장자를 가진 파일입니다. 파일 중에 HTML 파일이 있는 것을 보실 수 있는데요. 성격이 급하신 분들을 위해 폰트스쿼럴에서 준비한 데모페이지 파일 입니다. 클릭하시면 기본 웹브라우저로 데모를 보실 수 있습니다. 아래와 같이 말이지요.

데모페이지의 내용은 실제로는 매우 많습니다. 한번 보시는 것도 나쁘지 않겠습니다. 자 이제 적용하는 방법을 알아야 하겠죠? EOT, WOFF, SVG 파일들은 웹폰트이니 웹사이트의 이미지나 플래쉬 혹은 스타일시트(CSS) 처럼 웹서버에 있어야 합니다. 언제 어느곳에서나 항상 원하는 웹폰트를 표시하기 위해서는 당연한 이치이지요. 표시하실 웹사이트 루트 아래에 폴더르 하나 생성해서 업로드를 해주시고 생성된 웹폰트 압축파일에 있는 Stylesheet.css를 편집기로 열어보세요.

@font-face라는 CSS 요소로 EOT, WOFF, SVG가 기술되어 있는 것을 볼 수 있습니다. 하지만 TTF는 뺴주세요. TTF는 보통 용량이 클 뿐만이 아니라 TTF로 보통 배포하지 않습니다. @font-face를 복사해서 아래 처럼 홈페이지 HTML 파일의 HEAD 태그 사이에 넣어주시면 전체에 적용됩니다.

꼭 폰트 경로를 지정해주셔야 합니다. 모두 완료하셨다면 이제 홈페이지를 열어서 이쁜 폰트로 출력되는 것을 보실 수 있습니다. 폰트스쿼럴은 이렇게 정말 좋은 기능을 제공해주는 사이트 인데 단점이 있습니다. 아쉽게도 용량제한이 있어서 서울서체 처럼 큰 폰트파일은 바로 올리지 못합니다. 이러한 단점도 있으니 상황에 맞게 유용하게 사용하시길 바래요.