Base64를 글꼴로

Base64 글꼴을 디코딩하는 방법

1. Base64 또는 data URI에 다음 중 하나를 붙여넣으세요. 순수 Base64, data:font/woff2;base64,d09GMg… 같은 data URI, 또는 이를 포함한 CSS입니다. 한 규칙에 src 항목이 여러 개라면 첫 번째 data URI를 씁니다.
2. 미리보기는 팡그램 “The quick brown fox jumps over the lazy dog 0123456789"와 전체 알파벳 한 줄로 글꼴을 보여 줍니다. 예시 텍스트에 직접 입력해 원하는 단어로 시험해 보세요.
3. 정보 목록에는 글꼴 파일이 스스로 밝히는 정보가 나옵니다. 글꼴 패밀리, 스타일, 전체 이름, 버전, 글리프, em당 단위입니다.
4. 파일 다운로드를 눌러 형식에 맞는 확장자로 저장하세요.

브라우저가 글꼴을 받아들이면 정보 아래 상태 표시줄에 “디코딩된 글꼴로 렌더링했습니다.“라고 나옵니다. 글꼴은 이 페이지 전용의 비공개 이름으로 등록되고, 다른 것을 디코딩하면 다시 제거됩니다. 페이지의 Content Security Policy가 Cloudflare 조회수 집계 외의 모든 네트워크 통신을 막으므로 파일은 어디로도 가지 않습니다.

형식과 도구가 읽는 정보

WOFF2라면 패밀리 행에 “읽지 않음 (WOFF2 테이블은 Brotli로 압축됨)“이 표시됩니다. 페이지가 직접 Brotli를 풀지 않고, Brotli를 푸는 브라우저 글꼴 엔진은 그 결과를 외부에 내주지 않기 때문입니다. 렌더링에는 영향이 없으므로 글꼴이 제대로 보이는지는 여전히 확인할 수 있습니다. 저장한 뒤 이름을 읽으려면 WOFF2를 지원하는 fontconfig의 fc-scan을 쓰세요.

fc-scan --format "%{family}: %{style}\n" font.woff2

Material Icons 글꼴이라면 Material Icons: Regular가 출력됩니다.

글꼴이 렌더링되지 않을 때

“브라우저가 이 글꼴을 거부했습니다. 손상되었거나 글꼴이 아닐 수 있습니다.“는 브라우저의 글꼴 검사기가 파일을 거부했다는 뜻입니다. Chrome과 Firefox는 웹 글꼴을 쓰기 전에 모두 구조 오류를 검사하는데, 잘렸거나 더 큰 파일에서 잘못된 오프셋으로 잘라 낸 글꼴은 이 검사를 통과하지 못합니다. 디코딩된 크기를 원본과 비교하세요. 끝부분이 사라진 Base64 문자열은 마지막 테이블이 깨진 글꼴로 디코딩됩니다.

정보 목록에 이름은 나오는데 예시가 계속 비어 있다면, 입력한 문자에 해당하는 글리프가 글꼴에 없는 것입니다. 다음과 같은 경우에 생깁니다.

• 아이콘 글꼴: 기호가 U+E000 이상 같은 사용자 정의 영역 코드 포인트에 있습니다. Material Icons처럼 합자를 쓰는 글꼴은 home처럼 아이콘 이름을 입력하면 아이콘이 나옵니다.
• 서브셋 글꼴: 웹 페이지는 필요한 문자만, 때로는 수십 개만 넣는 경우가 많습니다. 글리프에서 파일에 든 글리프 수를 볼 수 있습니다.
• 다른 문자 체계용 글꼴: 아랍 문자나 데바나가리용 글꼴에는 라틴 문자가 없을 수 있습니다. 한글 글꼴은 대개 라틴 문자도 포함하지만, 한글을 확인하려면 한글을 직접 입력하세요.

데이터가 아예 글꼴이 아니라면 “글꼴이(가) 아니라 PDF(으)로 보입니다.” 같은 안내가 형식을 알려 주고, 그에 맞는 다운로드 버튼을 보여 줍니다.

Base64 글꼴이 나오는 곳

대부분 CSS에서 나옵니다. 빌드 도구는 작은 글꼴을 스타일시트 안에 data: URI로 인라인하고, 단일 파일 HTML 내보내기, 오프라인 보고서, 텍스트가 든 SVG 파일도 같은 방식으로 글꼴을 담습니다. 인라인에는 대가가 있습니다. 포함된 글꼴은 스타일시트와 따로 캐시될 수 없습니다. 자세한 내용은 data URI 성능에 있습니다. 글꼴 파일을 이런 규칙으로 바꾸려면 글꼴을 Base64로를 사용하세요.

Python으로 스타일시트의 모든 글꼴 추출하기

도구는 처음 찾은 data URI를 디코딩합니다. 글꼴이 여러 개 포함된 스타일시트라면 짧은 스크립트로 모두 올바른 확장자로 저장할 수 있습니다.

import base64, re

SIGNATURES = {b"wOF2": "woff2", b"wOFF": "woff", b"OTTO": "otf", b"\x00\x01\x00\x00": "ttf", b"ttcf": "ttc"}

css = open("icons.css").read()
pattern = r"data:[^;,]*(?:;[^;,]*)*;base64,([A-Za-z0-9+/=\s]+)"
for i, b64 in enumerate(re.findall(pattern, css)):
    data = base64.b64decode(b64)
    ext = SIGNATURES.get(data[:4], "bin")
    with open(f"font-{i}.{ext}", "wb") as f:
        f.write(data)
    print(f"font-{i}.{ext}", len(data), "bytes")

스타일시트는 글꼴에 application/font-woff, application/octet-stream처럼 레이블을 느슨하게 붙이는 경우가 많으므로, 확장자는 처음 4바이트로 정합니다. 자세한 내용은 Python에서 Base64에 있습니다.

자주 묻는 질문