TTF나 OTF 글꼴을 웹사이트에 쓰려는데 WOFF2 파일과 @font-face CSS를 따로 만들기 번거롭다면 Webfont Bundler로 한 번에 준비할 수 있습니다. Linux에서 글꼴을 불러오고 출력 형식과 저장 폴더를 고르면 변환 결과와 CSS 연결 코드를 확인할 수 있습니다.
이 글은 공식 Flathub의 무료 Linux Flatpak을 설치한 뒤 실제 화면에서 글꼴을 선택하고 웹폰트 묶음을 만드는 순서를 설명합니다. 폰트 파일 자체를 배포하거나 웹에서 사용할 권리는 각 글꼴의 라이선스를 먼저 확인해야 합니다.
글꼴 파일과 CSS를 함께 준비하는 도구
Webfont Bundler는 TTF·OTF 글꼴에서 웹용 WOFF 또는 WOFF2 파일과 @font-face 선언에 필요한 CSS를 만듭니다. 개발자 README와 GNOME 소개가 함께 설명하는 핵심 기능입니다. 이미 가지고 있는 로컬 폰트를 변환할 수도 있고, Google Fonts의 CSS 주소를 가져와 자체 호스팅용 파일을 내려받는 기능도 있습니다. Google Fonts를 가져오는 경우에도 해당 글꼴의 이용 조건은 확인해야 합니다.
공식 화면의 첫 단계는 Open Fonts입니다. 글꼴을 불러오면 목록에 패밀리 이름, normal·italic 스타일, 400·600 같은 굵기가 각각 보입니다. 같은 이름의 글꼴이 여러 줄 나타나도 오류가 아니라 스타일과 굵기가 다른 파일일 수 있습니다. 웹페이지에 필요한 굵기만 남기면 불필요한 출력 파일을 줄일 수 있습니다.
오른쪽 Options에서 WOFF2와 WOFF를 각각 켜고 끄며, Subsetting으로 글자 범위를 줄이고, CSS 영역에서 Base64 Encode와 font-display 옵션을 고를 수 있습니다. 모든 옵션을 무조건 켤 필요는 없습니다. 먼저 WOFF2 결과와 CSS가 생성되는지 확인한 뒤 오래된 브라우저 지원, 포함할 문자, CSS 파일 관리 방식에 따라 나머지 옵션을 정하는 편이 이해하기 쉽습니다.
실제 화면: 글꼴 불러오기부터 CSS 결과 확인까지
Flathub의 Webfont Bundler 화면입니다. Open Fonts 첫 화면, Google Fonts 가져오기, WOFF2·WOFF·Subsetting 설정, 완료 후 CSS 연결 코드가 차례로 보입니다.
| 프로그램 | Webfont Bundler · Apps for GNOME |
| 개발자 | Rafael Mardojai CM |
| 앱 ID | com.rafaelmardojai.WebfontKitGenerator |
| 배포 | Flathub 무료 Flatpak |
| 지원 환경 | Linux x86_64 · aarch64 |
| 표시 버전 | 1.3.0 |
| 입력·출력 | TTF·OTF → WOFF·WOFF2 + CSS |
Linux에 Webfont Bundler 설치하기
GNOME 제품 페이지는 Flathub 설치를 안내합니다. Flathub는 이 앱을 무료로 표시하고, 현재 안정 버전 1.3.0과 Linux x86_64·aarch64를 나열합니다. 아래의 공식 설치 경로는 Linux용 Flatpak입니다. Windows용 EXE나 macOS용 앱으로 바꿔 실행할 수 있는 파일이 아닙니다.
설치 대상을 확인할 때는 Webfont Bundler라는 이름과 com.rafaelmardojai.WebfontKitGenerator 앱 ID를 함께 보세요. 이름은 Webfont Bundler로 바뀌었지만 앱 ID에는 예전 WebfontKitGenerator 표기가 남아 있습니다. 이 차이 때문에 다른 프로그램을 받았다고 생각하기 쉬운데, 공식 Flathub 항목에서 두 이름을 함께 확인할 수 있습니다.
Linux에 Flatpak과 Flathub가 설정돼 있다면 .flatpakref를 열어 설치 화면에서 앱 이름과 ID를 확인하고 설치를 마칩니다. 참조 파일만 저장하고 끝내면 앱이 설치된 상태가 아닙니다. 설치가 끝난 뒤 앱 목록에서 Webfont Bundler를 열고 첫 화면의 Open Fonts 버튼을 확인하세요.
- Linux에서 Flatpak과 Flathub 설정을 확인합니다.
- 설치 화면의 Webfont Bundler 및 com.rafaelmardojai.WebfontKitGenerator를 대조합니다.
- 설치를 마치고 앱 목록에서 열어 Open Fonts 버튼을 확인합니다.
TTF·OTF를 불러와 WOFF2와 CSS 만들기
먼저 웹에서 쓸 수 있는 권한이 있는 TTF 또는 OTF 파일을 준비하세요. 글꼴이 개인 사용만 허용되는 경우, 변환에 성공해도 웹 서버에 올릴 권리가 생기는 것은 아닙니다. 파일을 골랐다면 Webfont Bundler의 Open Fonts 또는 화면 왼쪽 위 + 버튼으로 불러옵니다. 목록에 원하는 패밀리와 굵기, 기울임꼴 스타일이 보이는지 확인하세요.
오른쪽 Options에서 WOFF2가 켜져 있는지 확인하고, 오래된 환경에 WOFF도 필요하다면 함께 켭니다. Subsetting은 출력 크기를 줄일 때 쓰지만 필요한 한글·숫자·기호가 빠지면 페이지에서 글자가 다른 폰트로 보일 수 있습니다. 처음에는 전체 글꼴로 생성해 화면을 확인하고, 나중에 실제 쓰는 문자 범위를 기준으로 다시 줄이는 편이 안전합니다.
하단 Select Output Directory에서 저장할 폴더를 지정한 뒤 Generate를 누릅니다. 진행 화면이 끝나면 완료 화면에 CSS를 HTML의 head에 연결하는 link 코드와 기존 CSS에 넣는 @import 코드가 표시됩니다. 생성된 폴더를 열어 WOFF2 파일과 CSS가 있는지 확인하고, 웹 프로젝트의 실제 경로에 맞게 파일을 옮긴 다음 코드의 경로도 맞춰야 합니다.
- Open Fonts에서 웹 사용 권한이 있는 TTF·OTF 글꼴을 불러옵니다.
- 목록의 패밀리·굵기를 확인하고 WOFF2 및 필요한 옵션을 선택합니다.
- 출력 폴더를 지정하고 Generate 후 파일과 CSS 연결 코드를 확인합니다.
생성한 웹폰트를 사이트에 붙이기
완료 화면은 글꼴별 CSS 파일을 연결하는 예를 보여 줍니다. 예시 화면에서는 crimson-text/crimson-text.css와 roboto/roboto.css처럼 글꼴 폴더별 상대경로가 나옵니다. 이 경로는 사용자가 선택한 출력 폴더와 실제 웹 서버에 파일을 옮긴 위치에 따라 달라지므로 화면의 예시 코드를 그대로 복사하기 전에 자신의 폴더 구조와 맞는지 확인하세요.
HTML 문서에 넣을 때는 완료 화면의 link 코드를 head 영역에 추가하고, 기존 스타일시트에서 관리하려면 @import 코드를 사용합니다. 한 방식만 정해도 됩니다. 그다음 개발자 도구의 네트워크 목록에서 WOFF2와 CSS가 404 없이 불러와지는지 보고, 실제 페이지의 한글·영문·숫자가 원하는 글꼴로 표시되는지 확인하세요.
CSS에 @font-face가 만들어졌더라도 사이트의 제목이나 본문에 그 폰트를 적용하는 규칙은 별도로 필요할 수 있습니다. 완성된 CSS에서 지정된 font-family 이름을 확인하고 사이트의 해당 요소에 연결하세요. 굵기 400만 넣고 700을 쓰면 브라우저가 임의로 굵게 보이게 할 수 있으므로, 실제 디자인에 필요한 굵기 파일도 함께 넣었는지 살펴보세요.
가변 글꼴을 쓰는 경우에는 일반 굵기 파일 여러 개를 다루는 방식과 결과가 다를 수 있습니다. 개발자의 1.2.0 릴리스 설명은 variable fonts 지원을 추가했다고 밝힙니다. 설치한 1.3.0에서 가변 글꼴을 불러왔다면 완료 후 만들어진 CSS의 굵기 범위와 실제 페이지의 굵기 변화를 함께 시험하세요. 목록에 보인 이름만으로 모든 굵기가 자동 적용된다고 생각하기보다, 브라우저에서 가는 글씨와 굵은 글씨를 나란히 확인하는 편이 정확합니다.
Google Fonts를 가져와 자체 호스팅하기
로컬 TTF·OTF가 없다면 Google Fonts 가져오기 기능을 사용할 수 있습니다. 공식 화면의 Import from Google Fonts 창에는 fonts.googleapis.com/css2 주소를 넣는 칸과 Download Fonts 버튼이 보입니다. 먼저 Google Fonts에서 원하는 글꼴·굵기를 고른 뒤 제공되는 CSS 주소를 사용하세요. 글꼴 이름만 입력하는 검색창과는 다른 기능입니다.
가져온 글꼴도 목록에 나타나면 필요한 스타일을 남기고 출력 폴더를 정해 Generate합니다. 자체 호스팅 파일을 만들면 사이트가 외부 글꼴 서버에 직접 요청하지 않도록 구성할 수 있지만, 실제 방문자에게 제공되는 CSS와 폰트 URL을 자신의 서버로 바꾸어야 합니다. 코드를 옮기지 않고 기존 Google Fonts 주소만 남겨 두면 호스팅 방식이 바뀌지 않습니다.
Google Fonts 가져오기가 되지 않을 때는 주소 전체가 올바른 CSS URL인지, 인터넷 연결이 되는지부터 보세요. 앱의 예시 입력란처럼 css2 형식의 URL을 써야 하는 상황에서 글꼴 소개 페이지 주소를 넣으면 원하는 파일을 가져오지 못할 수 있습니다. 글꼴별 라이선스도 다시 확인하세요. 자체 호스팅은 제공 위치를 바꾸는 작업이지 이용 허락을 생략하는 방법이 아닙니다.
가져오기 창의 Download Fonts와 변환 화면의 Generate는 서로 다른 단계입니다. 전자는 Google Fonts에서 원본을 가져오고, 후자는 선택한 글꼴과 옵션으로 웹폰트 파일·CSS를 만드는 단계입니다. 가져오기만 마친 뒤 사이트 폴더에 아무 파일도 없다면 글꼴 목록으로 돌아가 출력 폴더를 지정했는지 살펴보세요.
변환 파일이 빠지거나 글자가 깨질 때
Generate가 눌리지 않는다면 왼쪽 목록에 글꼴이 들어왔는지, 하단 출력 폴더가 지정됐는지 확인하세요. 공식 설정 화면에도 Select Output Directory와 Generate가 나란히 있습니다. 가져온 글꼴의 패밀리·스타일이 보이지 않으면 파일 형식이 TTF·OTF인지 다시 확인하고 다른 원본 파일로 시도해 볼 수 있습니다.
완료 메시지는 보이는데 사이트에서 글꼴이 적용되지 않는다면 변환 실패로 단정하지 마세요. 출력 폴더의 CSS와 WOFF2가 실제로 존재하는지, HTML link 또는 CSS @import 경로가 서버 위치와 맞는지 확인합니다. 브라우저에서 CSS는 열리지만 폰트 파일이 404라면 CSS 안의 상대경로도 살펴봐야 합니다.
일부 문자만 기본 글꼴로 바뀐다면 Subsetting을 켰는지 확인하세요. 필요한 한글 글자나 기호를 제외했을 수 있습니다. 일단 부분 추출을 끄고 다시 생성해 해당 문자가 표시되는지 비교하면 원인을 좁힐 수 있습니다. WOFF2만 만들었는데 특정 오래된 환경에서 보이지 않는다면 WOFF도 함께 생성할지 검토하세요.
자주 묻는 질문
Webfont Bundler는 무료인가요?
네. Flathub가 Free로 표시하고 프로젝트 라이선스는 GPL-3.0-or-later입니다. 변환할 글꼴의 사용권은 별개로 확인하세요.
Windows에서도 설치할 수 있나요?
이번에 확인한 공식 파일은 Linux Flatpak입니다. 같은 .flatpakref를 Windows 설치 파일로 사용할 수는 없습니다.
TTF와 OTF 모두 WOFF2로 만들 수 있나요?
네. 공식 GNOME 소개와 개발자 README가 TTF·OTF 입력, WOFF·WOFF2 및 CSS 생성을 설명합니다.
Google Fonts를 바로 가져올 수 있나요?
네. 공식 화면에는 Google Fonts CSS URL을 넣는 가져오기 창이 있습니다. 글꼴별 사용권도 확인하세요.
변환 뒤 글자가 일부 안 보이면 무엇을 확인하나요?
Subsetting으로 필요한 글자가 빠지지 않았는지 먼저 보고, 출력 CSS와 WOFF2 경로도 확인하세요.
글꼴 파일과 CSS가 함께 생성됐는지 확인하세요
Webfont Bundler는 Linux에서 TTF·OTF를 웹용 WOFF2와 CSS로 묶을 때 유용합니다. Open Fonts로 글꼴을 넣고 필요한 형식을 고른 다음 출력 폴더를 지정해 Generate하면 첫 작업이 끝납니다.
완료 화면의 연결 코드를 사이트 경로에 맞춰 적용하고, 실제 페이지에서 글꼴과 한글 문자가 제대로 보이는지 확인하세요. Google Fonts를 가져왔든 직접 가진 파일을 변환했든 웹 배포에 필요한 글꼴 라이선스도 함께 살펴보면 됩니다.
공식 자료와 확인일
GNOME 공식 Webfont Bundler 제품 페이지 · Flathub 공식 Webfont Bundler 목록 · 개발자 공식 README | 2026년 10월 26일
