글꼴을 Base64로

글꼴을 Base64로 변환하는 방법

1. .woff2, .woff, .ttf, .otf 파일을 상자에 놓거나 파일 선택 창에서 고르세요.
2. 출력 형식은 이미 CSS @font-face로 설정되어 있습니다. 규칙을 직접 작성한다면 Data URI나 일반 Base64를 고르세요.
3. 출력 복사를 누르고 스타일시트에 붙여넣으세요.

Inter-Bold.woff2라는 파일이라면 결과는 다음과 같습니다(데이터는 줄였습니다).

@font-face {
  font-family: "Inter-Bold";
  src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
  font-display: swap;
}

font-family 이름은 파일 이름에서 확장자를 빼고, 문자, 숫자, 공백, -, _ 이외의 문자를 공백으로 바꾼 것입니다. CSS에서 쓰는 패밀리 이름으로 바꾸고, 한 패밀리의 여러 스타일을 포함한다면 font-weight와 font-style을 추가하세요.

format() 힌트와 MIME 형식

format() 힌트가 있으면 브라우저는 쓸 수 없는 소스를 내려받지 않고 건너뜁니다. 포함된 소스가 하나뿐이면 중요도가 낮지만, 브라우저가 모르는 힌트가 붙어 있으면 그 소스를 건너뛰는 것은 마찬가지입니다. 도구는 브라우저가 알려 주는 MIME 형식으로 힌트를 정하는데, 일부 시스템은 글꼴을 특이한 형식으로 보고합니다. OTF인데 format("truetype")이 나오면 opentype으로 바꾸세요.

TrueType 글꼴을 감싼 WOFF2는 d09GMgABAAA로, CFF 윤곽선을 감싼 WOFF2는 d09GMk9UVE8로 시작합니다.

포함하는 글꼴은 작게 유지하세요

Base64는 글꼴 파일보다 3분의 1 크고, 렌더링을 막는 CSS 안에 들어갑니다. WOFF2로 된 77,160바이트 아이콘 글꼴로 테스트하면 Base64가 102,880문자였고, 페이지에 무엇이든 그려지기 전에 이 모두를 내려받아야 합니다.

인라인할 가치가 있게 하려면 다음을 지키세요.

• WOFF2를 쓰세요. 같은 글꼴이라도 TTF나 OTF보다 훨씬 작습니다.
• 글꼴을 서브셋하세요. 필요 없는 글리프, 예를 들어 라틴 문자 외의 모든 문자 체계를 지우면 큰 글꼴은 대부분의 크기가 줄어듭니다. 한글 글꼴은 글리프가 많아 서브셋의 효과가 특히 큽니다. 글꼴 서브셋 도구가 명령줄에서 이 작업을 해 줍니다.
• 한 가지 스타일만 인라인하세요. 첫 화면에 쓰는 제목 글꼴이나 아이콘 글꼴이 좋은 후보입니다. 네 가지 굵기의 본문 글꼴은 브라우저가 캐시할 수 있는 별도 파일로 두는 편이 낫습니다.

자체 완결형 HTML 문서, 그리고 자기 글꼴을 담아야 하는 캔버스나 SVG 내보내기가 글꼴 포함이 알맞은 대표적인 경우입니다.

Base64 글꼴 확인하기

텍스트가 기본 글꼴로 대체된다면 브라우저 개발자 도구에서 글꼴 로딩 오류를 찾고, data URI가 data:font/로 시작하는지, 페이로드가 위 접두사 중 하나로 시작하는지 확인하세요. PCFET0NUWVBF로 시작하는 파일은 글꼴 확장자로 저장된 HTML 페이지입니다. Base64를 글꼴로는 문자열을 디코딩해 글리프를 미리 보여 주고 파일로 저장합니다.

자주 묻는 질문