TTF WOFF2 변환

글꼴을 직접 호스팅하려면 여기서 시작합니다. WOFF2는 현재의 모든 브라우저가 가장 먼저 다운로드하는 형식이자, 이미 가진 트루타입 데이터를 담는 가장 작은 포장입니다. 이 페이지는 글꼴을 불러오는 CSS 규칙도 함께 작성합니다.

또는 TTF, OTF, WOFF … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

변환할 형식

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

1
TTF 파일 업로드
사용할 굵기와 스타일을 모두 추가합니다. 최대 20개, 개당 95 MB까지입니다. 가변 TTF도 축을 유지한 채 변환됩니다.
2
CSS는 켜 두고, 가능하면 문자 줄이기
@font-face CSS 포함은 이미 체크되어 있습니다. 서유럽 언어 사이트라면 고급 설정에서 남길 문자를 기본 라틴 문자 또는 라틴 + 악센트로 정하고, 힌팅을 제거로 바꾸는 것도 고려하십시오.
3
WOFF2로 변환
WOFF2로 변환을 누르고 글꼴과 .css 파일을 다운로드합니다. 둘 다 사이트에 올린 뒤 스타일시트를 연결하거나 규칙을 기존 스타일시트에 붙여 넣으십시오.

답변

웹사이트용으로 TTF를 WOFF2로 변환하려면 어떻게 하나요?

.ttf를 업로드하고 @font-face CSS 포함을 체크한 채 WOFF2로 변환을 누르십시오. .woff2 파일과 함께, 그 파일을 가리키는 @font-face 규칙이 담긴 .css 파일을 받게 됩니다.

웹 글꼴로 WOFF2를 써야 하는 이유

TTF는 윤곽선, 메트릭, 커닝, 이름 같은 압축되지 않은 테이블 데이터입니다. 2018년 W3C 권고안으로 발표된 WOFF2는 바로 그 테이블을 그대로 유지하되, 먼저 글리프 윤곽선을 압축이 잘 되도록 재배열한 뒤 Google이 2015년에 공개한 압축 알고리즘 Brotli로 압축합니다. Google 자체 테스트에서 WOFF2는 이전 WOFF 형식보다 평균 약 30% 작았으며, 다운로드 후 브라우저가 원래 글꼴 데이터를 복원하므로 글자 모양은 전혀 바뀌지 않습니다.

글꼴은 렌더링을 막기 때문에 KB 숫자보다 용량이 더 중요합니다. 웹 글꼴이 도착할 때까지 브라우저는 텍스트를 숨기거나 대체 글꼴을 보여 주며, 늦은 교체는 레이아웃을 흔들 수 있습니다. 파일이 작을수록 그 시간이 줄어들고, 여기 있는 두 옵션이 이를 더 줄입니다. 남길 문자는 페이지에 나오지 않는 글리프를 지우고, 힌팅을 제거로 두면 휴대폰과 고해상도 화면이 어차피 무시하는 명령이 빠집니다. 데스크톱용으로는 TTF 원본을 보관하십시오. WOFF2 TTF 변환으로 나중에 웹 글꼴을 풀 수는 있지만, 서브셋으로 지운 글리프는 되살릴 수 없습니다.

TTF와 WOFF2 파일 용량 비교

TTF, 전체 문자

100%

데스크톱에 설치하는 그대로의 압축되지 않은 글꼴 테이블

여러 문자 체계를 담은 본문용 글꼴의 일반적인 결과

WOFF2, 기본 라틴 문자만

보통 10–25%

Brotli 압축에 글리프 수 감소까지, 글꼴마다 다름

WOFF2 글꼴용 @font-face 규칙

예시 규칙입니다. 이름을 바꾸고, 서브셋을 하지 않았다면 unicode-range를 지우십시오

@font-face {
  font-family: "브랜드 산스";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

버전별 WOFF2 브라우저 지원

2014
Chrome 36
Google 브라우저가 처음으로 WOFF2 디코딩을 기본 지원합니다.
2015
Firefox 39
Mozilla가 WOFF2 디코딩을 기본으로 켭니다.
2016
Edge 14
Microsoft의 초기 Edge가 Windows 10 1주년 업데이트와 함께 WOFF2를 지원합니다.
2018
W3C 권고안
사양이 확정됩니다. 이 무렵 macOS와 iOS의 Safari도 WOFF2를 디코딩합니다.

TTF

TrueType 글꼴(TTF)

TTF는 Apple이 1980년대 후반에 개발해 1991년에 공개하고 이후 Microsoft에 라이선스한 TrueType 글꼴 형식입니다. 2차 곡선으로 글리프 윤곽을 정의하고, 화면에서 글자가 선명하게 보이도록 하는 힌팅 명령을 포함합니다. TrueType은 모든 데스크톱 운영 체제, 워드프로세서, 디자인 앱에서 지원됩니다. OpenType의 일부 고급 타이포그래피 기능이 없고 웹 글꼴 형식보다 용량이 큽니다.

압축 방식: 무손실
투명도: –
애니메이션: –
도입 연도: 1991 · Apple

TTF 변환

WOFF2

웹 개방형 글꼴 형식 2(WOFF2)

WOFF2는 Web Open Font Format의 두 번째 버전으로, Google의 Brotli 압축을 기반으로 하며 2018년 W3C 권고안으로 발표되었습니다. 파일이 WOFF보다 약 30% 작아 페이지가 더 빨리 열립니다. 모든 최신 브라우저가 WOFF2를 지원하며, 웹 글꼴에 권장되는 형식입니다. 데스크톱 운영 체제와 디자인 앱에는 바로 설치할 수 없습니다.

압축 방식: 무손실
투명도: –
애니메이션: –
도입 연도: 2018 · W3C (Google)

WOFF2 변환

TTF를 WOFF2로 변환하면 데스크톱 글꼴이 브라우저가 선호하는 Brotli 압축 컨테이너에 담겨, 같은 글리프가 더 적은 바이트로 방문자에게 전달됩니다. 반대 방향 페이지는 웹에서 찾은 글꼴을 설치해야 하는 사람을 위한 것입니다.

TTF WOFF2 변환 자주 묻는 질문

WOFF2 옆에 TTF나 WOFF 대체 파일이 아직 필요한가요?

오늘날 공개 웹사이트라면 대개 필요 없습니다. Chrome, Edge, Firefox, Safari는 수년 전부터 WOFF2를 읽으며, Internet Explorer 11처럼 읽지 못하는 몇몇 브라우저를 위해 파일을 하나 더 둘 가치는 거의 없습니다. 분석 데이터에 그런 방문자가 보일 때만 TTF WOFF 변환 결과를 두 번째 src 항목으로 추가하십시오.

WOFF2 글꼴이 왜 아직도 100 KB를 넘나요?

압축은 글리프를 저장하는 방식만 줄일 뿐 글리프 개수는 줄이지 않습니다. 라틴, 키릴, 그리스, 베트남어 문자를 모두 담은 글꼴은 그 전부를 함께 보냅니다. 본문용 글꼴을 수십 KB 수준으로 낮추는 것은 실제로 표시하는 문자 체계만 남기는 서브셋입니다.

font-display: swap은 무슨 역할을 하나요?

웹 글꼴을 다운로드하는 동안 텍스트를 숨기지 않고, 대체 글꼴로 즉시 표시했다가 웹 글꼴이 도착하면 바꿔 넣도록 브라우저에 알립니다. 위 예시처럼 @font-face 규칙에 추가하거나, 느린 연결에서 늦은 교체를 건너뛰고 싶다면 optional을 쓰십시오.

Google Fonts의 TTF를 WOFF2로 변환해 직접 호스팅해도 되나요?

네. Google Fonts 패밀리는 SIL Open Font License나 Apache License로 배포되며, 둘 다 변환과 직접 호스팅을 허용합니다. 직접 호스팅하면 제3자 서버로의 요청도 피할 수 있습니다.

이메일 뉴스레터에서도 WOFF2가 작동하나요?

일부 메일 앱에서만 작동합니다. Apple Mail과 iOS Mail은 @font-face로 웹 글꼴을 불러오지만, Gmail과 대부분의 Outlook 버전은 이를 무시하고 대체 글꼴을 보여 줍니다. 이메일의 글꼴 목록에는 항상 안전한 시스템 글꼴을 넣으십시오.

TTF WOFF2 변환

글꼴 변환

사용 방법

TTF 파일 업로드

CSS는 켜 두고, 가능하면 문자 줄이기

WOFF2로 변환