font-display 옵션을 고르면 FOIT/FOUT를 줄이는 @font-face 코드를 바로 만들고 복사할 수 있습니다.
💡 생성된 @font-face 코드
📊 적용 안내
* [실무 팁] 용량이 작은 .woff2를 먼저 적고, 그다음 .woff를 적으세요. 브라우저가 지원하는 첫 포맷만 받아 오기 때문에, 순서가 바뀌면 더 무거운 파일을 받을 수 있습니다.
💡 font-display로 웹폰트 깜빡임(FOIT/FOUT) 줄이기
사이트에 커스텀 웹폰트를 쓰면 첫 로딩 때 글자가 안 보이거나, 기본 서체로 떴다가 지정 서체로 바뀌며 화면이 살짝 흔들리는 일이 잦습니다. 전자를 FOIT(Flash of Invisible Text), 후자를 FOUT(Flash of Unstyled Text)라고 부릅니다. CSS font-display 값을 고르면 브라우저가 폰트를 받는 동안 글자를 어떻게 보여줄지 정할 수 있고, 이 도구는 선택한 값으로 @font-face 코드를 바로 만들어 줍니다.
폰트 이름과 파일 경로만 넣으면 woff2·woff 순서가 잡힌 선언문이 채워집니다. 복사해서 스타일시트 맨 위에 붙여 넣으면 됩니다. 본문·뉴스처럼 글자를 바로 읽게 하려면 보통 swap을 쓰고, 버튼·메뉴처럼 레이아웃이 흔들리면 안 되는 UI에는 fallback이나 optional을 검토해 보세요.
📊 font-display 값별 동작 비교
웹폰트를 받는 동안 화면에 글자를 어떻게 둘지 정하는 옵션입니다. 사이트 성격에 맞는 값을 고르세요.
| 값 | 숨김 시간 (Block) | 교체 가능 시간 (Swap) | 체감 · 추천 용도 |
|---|---|---|---|
| swap (추천) | 없음 (0초) | 제한 없음 | 기본 서체로 바로 보임 → 로드 후 교체 (블로그·뉴스 본문) |
| fallback | 매우 짧음 (약 0.1초) | 짧음 (약 3초) | 잠깐 기다린 뒤 기본 서체 노출. 너무 늦으면 교체 안 함 (버튼·메뉴) |
| optional | 매우 짧음 (약 0.1초) | 없음 (0초) | 네트워크가 빠를 때만 웹폰트 적용, 느리면 기본 서체 유지 (성능 우선) |
| block | 약 3초 | 제한 없음 | 폰트가 올 때까지 글자가 안 보임 (로딩 연출이 있는 인트로 등) |
📌 FOIT와 FOUT는 어떻게 다른가
FOIT는 웹폰트가 올 때까지 글자를 아예 그리지 않아 빈 화면처럼 보이는 경우입니다. 읽힐 글이 없으면 이탈이 늘기 쉽습니다. FOUT는 먼저 시스템 기본 서체(예: 맑은 고딕, Arial)로 보여 준 뒤, 웹폰트가 도착하면 바꿔 그리는 경우입니다. 글자는 바로 보이지만 교체 순간 줄바꿈이 조금 바뀔 수 있습니다.
기본값으로 쓰는 font-display: swap은 FOIT를 피하고 글자를 바로 보여 주는 쪽에 가깝습니다. 브랜드 서체가 꼭 같아야 하는 화면이라면 fallback·optional로 교체를 줄이는 편이 나을 수 있습니다.
⚙️ woff2를 먼저 적는 이유
같은 서체라도 .woff2가 보통 .woff·TTF보다 가볍습니다. src: url() 목록에서는 지원하는 포맷 중 앞에 적힌 것부터 받습니다. 그래서 woff2를 위에, woff를 아래에 두는 것이 일반적입니다. 이 생성기도 그 순서로 코드를 만듭니다.
구형 브라우저만 상대할 게 아니라면 TTF를 웹에 그대로 올리는 일은 되도록 줄이는 편이 좋습니다. 용량이 크면 첫 글자가 늦게 바뀌고, 깜빡임도 더 오래 느껴질 수 있습니다.
🚨 이용 시 주의사항
이 도구는 플러그인 없이 붙여 넣을 수 있는 순수 CSS @font-face를 만듭니다. font-display: swap을 쓰면 기본 서체와 웹폰트의 자간·장평·줄간격 차이 때문에, 교체 순간 문단 줄바꿈이 조금 흔들릴 수 있습니다(레이아웃 밀림, CLS). 차이가 크면 size-adjust로 크기를 맞추거나, 본문 폭에 여유를 두고 주요 화면을 한 번 확인해 주세요. 서버에 실제로 .woff2·.woff 파일이 경로에 있어야 코드가 동작합니다.
