가지고 있는 폰트 파일을 확인하고, 홈페이지에 웹폰트로 적용하기까지 필요한 도구를 작업 단계별로 모았습니다. 확인·비교·식별·변환·서브셋·적용 순으로 정리했습니다.
소스
FontDrop!FontDrop!은 폰트 파일을 브라우저에서 바로 확인할 수 있는 웹 기반 폰트 뷰어 도구이다.Wakamai FondueWakamai Fondue는 폰트 파일의 문자 구성과 오픈타입 기능을 브라우저에서 분석하는 도구이다.
WhatTheFontWhatTheFont는 이미지에 보이는 글꼴을 찾아 주는 폰트 식별 서비스이다.
MatcheratorMatcherator는 샘플 이미지를 올려 비슷한 폰트를 찾아 주는 폰트 식별 서비스이다.
WhatFontWhatFont는 웹페이지에서 사용 중인 폰트를 클릭으로 확인하는 브라우저 확장·도구이다.
Font Squirrel Webfont GeneratorFont Squirrel Webfont Generator는 TTF·OTF 폰트를 WOFF 등 웹폰트 형식으로 변환하고 @font-face CSS를 생성하는 도구이다.
TransfonterTransfonter는 폰트 파일을 웹폰트 형식으로 변환하고 자체 호스팅용 CSS를 만들어 주는 온라인 도구이다.
fonttoolsfonttools는 폰트 파일을 읽고 수정하며 필요한 글자만 남기는 서브셋 기능을 제공하는 파이썬 기반 폰트 도구 모음이다.- glyphhangerglyphhanger는 웹페이지에서 실제 사용된 글자를 추출해 웹폰트 서브셋 제작에 쓰는 명령줄 도구이다.
IcoMoonIcoMoon은 아이콘을 골라 아이콘 폰트나 SVG 세트로 내보내는 웹 기반 아이콘 폰트 생성 도구이다.
FontelloFontello는 여러 아이콘 세트에서 필요한 아이콘만 골라 웹폰트로 패키징하는 아이콘 폰트 생성 도구이다.
FontForgeFontForge는 글리프를 그리고 편집하며 폰트 파일을 만들 수 있는 오픈소스 폰트 편집기이다.
구글 폰트Google Fonts는 구글이 제공하는 무료 오픈소스 웹폰트 라이브러리이다. 다양한 언어와 스타일의 폰트를 웹사이트에 손쉽게 적용할 수 있으며, 라이선스 걱정 없이 상업적으로도 자유롭게 사용할 수 있다.
어도비 폰트어도비 폰트는 Adobe Creative Cloud 구독자를 대상으로 제공되는 글꼴 서비스이다. 웹과 인쇄 환경에서 자유롭게 사용할 수 있다.FontsourceFontsource는 오픈소스 폰트를 npm 패키지로 설치해 자체 호스팅하는 웹폰트 배포 도구이다.
작업 흐름
| 단계 | 작업 | 도구 |
|---|---|---|
| 1 | 폰트 파일 확인 | FontDrop, Wakamai Fondue |
| 2 | 사용 폰트 식별 | WhatTheFont, WhatFont |
| 3 | 웹폰트로 변환 | Transfonter, Webfont Generator |
| 4 | 용량 줄이기 | fonttools, glyphhanger |
| 5 | 사이트에 적용 | Google Fonts, Fontsource |
폰트 파일을 확인하는 도구
확인할 수 있는 정보
누가 만들었는지, 얼마나 많은 문자가 들어 있는지, 아이콘처럼 쓸 수 있는 그림이 있는지, 유니코드는 무엇인지 등을 확인할 수 있습니다. 오픈타입 기능까지 보려면 Wakamai Fondue를 함께 쓰면 됩니다.
아이콘 폰트 구성과 유니코드 확인
홈페이지 제작 시 아이콘 폰트의 구성과 유니코드를 확인할 때 FontDrop이 유용합니다. 아이콘을 골라 폰트로 만들 때는 IcoMoon, Fontello를 쓰고, 글리프를 직접 편집할 때는 FontForge를 사용합니다.
지원 파일 형식과 폰트 비교
FontDrop은 현재 TTF, OTF, WOFF를 지원하며, 두 개의 폰트를 나란히 비교하는 기능도 제공합니다.
무료 폰트 미리보기 안내
구글 폰트, 눈누, 산돌구름, 폰코, 공유마당 등 무료 폰트·웹폰트 제공처는 웹사이트용 웹폰트·무료 한글 서체 모음에서 이어서 볼 수 있습니다.
폰트 식별
이미지에 찍힌 글꼴이나 웹페이지에 쓰인 폰트를 찾을 때 쓰는 도구입니다.
웹폰트 변환
TTF·OTF를 WOFF·WOFF2로 바꾸고 @font-face CSS를 만들 때 사용합니다.
Font Squirrel Webfont Generator
Font Squirrel Webfont Generator는 TTF·OTF 폰트를 WOFF 등 웹폰트 형식으로 변환하고 @font-face CSS를 생성하는 도구이다.
서브셋으로 파일 용량 줄이기
한글 폰트는 글리프 수가 많아 파일 용량이 큰 편이고, 사이트에서 쓰는 글자만 남기는 서브셋을 적용하면 로딩 용량이 줄어듭니다. 서브셋 대상은 제목 영역처럼 문구가 고정된 부분에 적용하는 방식이 있고, 본문용 폰트는 유니코드 범위를 나눠 필요한 구간만 불러오는 방식(unicode-range)이 있습니다.
웹폰트 적용과 호스팅
| 방식 | 내용 | 소스 |
|---|---|---|
| 외부 서비스 호출 | 서비스가 제공하는 link 또는 @import 코드로 적용 | Google Fonts, Adobe Fonts |
| 자체 호스팅 | 폰트 파일을 사이트 서버에 올려 @font-face로 적용 | Fontsource, Transfonter |
등록조회1