▤ 목차
"나만의 글꼴을 웹에서도 그대로 보여주고 싶다"는 디자이너와 개발자들의 마음, 너무 잘 알죠.
Transfonter를 이용하면 몇 번의 클릭으로 웹폰트와 CSS가 완성됩니다.
본문에서는 Transfonter의 주요 기능, 설정 방법, 추천 활용법을 표로 정리해 소개합니다.
웹폰트 변환, 이보다 쉬울 수 없다! Transfonter로 간편하게 @font-face CSS 생성하기
Transfonter란? 웹폰트 변환과 @font-face CSS 생성을 한번에!
TTF, OTF, WOFF 등 다양한 포맷 지원…CSS 자동 생성까지
Transfonter(https://transfonter.org)는 로컬 폰트를 웹에서 사용할 수 있도록 자동 변환해주는 웹 기반 도구입니다.
단순한 포맷 변환을 넘어서 CSS 코드까지 함께 생성해주기 때문에 디자이너와 퍼블리셔 모두에게 강력한 워크플로우 도구로 손꼽힙니다.
Transfonter 주요 기능 요약표
| 기능 항목 | 설명 |
|---|---|
| 지원 포맷 | TTF, OTF, WOFF, WOFF2, SVG |
| 출력 포맷 | WOFF2, TTF, EOT, WOFF, SVG 등 선택 가능 |
| 다중 업로드 | 폰트 여러 개 한 번에 업로드 가능, 드래그 앤 드롭 지원 |
| CSS 자동 생성 | @font-face 스타일 자동 생성 및 demo.html 포함 |
| Base64 인코딩 지원 | 인라인 사용을 위한 base64 설정 가능 |
| Unicode 설정 | 필요한 범위만 선택해 폰트 크기 최적화 |
| Subsets 지원 | 라틴, 한글, 일본어 등 문자셋 세부 선택 가능 |
| 폰트 디스플레이 옵션 | swap, fallback 등 font-display 속성 선택 가능 |
특징
- 전혀 설치할 필요 없이 웹사이트에서 모든 작업 완료
- 변환된 폰트 + CSS + 데모 페이지까지 ZIP 파일로 자동 압축 다운로드
- 폰트 라이선스 정책에 따라 자유롭게 웹 내 적용 가능
어떻게 사용하나요? 사용법은 단 3단계!
- Add font(s) 버튼 클릭 → TTF, OTF 등 로컬 폰트 업로드
- 포맷, 유니코드 범위, 서브셋, font-display 옵션 등 선택
- Convert 클릭 → 변환된 폰트 + CSS + 데모 zip 파일 다운로드
| 이모지 합치는 사이트 소개 - 이모티콘 두개 합성하는 방법 |
| 코딩테스트 연습 사이트(온라인 저지 사이트) 소개 |
| 2023년 10월 커뮤니티 사이트 순위 |
| 자주 사용하는 전기차 EV 충전소 조회 사이트 TOP3 |
설정 옵션 하나하나 뜯어보기 – 어떤 설정을 선택해야 할까?
성능 최적화부터 브라우저 호환성까지, 세밀한 설정 가능
Transfonter는 다양한 옵션을 제공하지만, 초보자도 쉽게 사용할 수 있도록 기본값이 최적화되어 있습니다.
고급 사용자는 Unicode 범위 제한, Base64 인코딩, 폰트 디렉토리 설정 등으로 파일 크기 최적화 및 로딩 속도 향상도 가능하죠.
설정 옵션 상세 설명표
| 설정 항목 | 기능 설명 및 권장 설정 예시 |
|---|---|
| Family support | 글꼴 계열(font-family) 자동 설정 (기본 On 권장) |
| Fix vertical metrics | 높이 정렬 보정. 폰트 간 줄 높이 문제가 있을 경우 On 설정 |
| Add local rule | 로컬 폰트 우선 사용 설정. 웹폰트보다 시스템 글꼴 우선 시 사용 |
| Base64 encode | CSS 내 폰트를 인라인으로 삽입 (파일 분리 필요 없는 경우만 On) |
| Formats | 변환할 파일 포맷 선택. WOFF2만으로도 최신 브라우저는 대부분 호환됨 |
| Hinting | 힌팅 보존 여부. ‘Keep existing’ 추천 |
| Subsets | 문자셋 제한 가능. 한글 사용자는 ‘Latin Extended’ + ‘Korean’ 선택 추천 |
| Unicode ranges | 직접 유니코드 범위 지정 가능. 사용 문자의 유니코드 범위만 포함하면 용량 절감 |
| Font display | swap 추천. FOUT 방지 및 UX 향상 |
| Fonts directory | CSS 내 경로 지정. 커스텀 프로젝트 구조에 맞게 설정 가능 |
웹폰트 설정이 어렵다고 느꼈다면, Transfonter가 정답입니다
Transfonter는 웹폰트 설정을 어려워하던 웹디자이너와 개발자들에게 “클릭 몇 번으로 웹폰트가 완성된다”는 새로운 기준을 제시한 도구입니다.
- 다양한 포맷 지원 (TTF, OTF, WOFF, SVG 등)
- CSS 자동 생성으로 빠른 적용
- 성능 최적화를 위한 세밀한 옵션 제공
- Base64, Unicode, Subsets 등 고급 설정도 가능
- 사용자 친화적 UI로 입문자도 쉽게 사용
직접 Transfonter를 사용해 웹사이트의 타이포그래피 수준을 한 단계 업그레이드해보세요!
“웹폰트는 선택이 아니라 필수입니다.
Transfonter로 웹의 인상을 디자인하세요.”
| IT 취업 정보, 기업 평판과 연봉 정보 참고 사이트 TOP3 |
| 저작권 걱정 없는 AI 음악 사이트 '믹스 오디오' 소개 및 사용법 |
| 증권시세 확인 대표 사이트 TOP 3 |
| 로또 당첨 번호 예측 사이트의 기승과 그 위험성 |
| 과속 단속 조회 방법, 실시간 차량번호 조회 사이트 활용하기 |
