font-display 코드 생성기
웹폰트 로딩 방식(font-display)을 비교하고 @font-face 코드를 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
CSS의 font-display 속성값(auto, block, swap, fallback, optional)이 실제로 어떻게 다르게 동작하는지 시각적 타임라인으로 비교해볼 수 있는 도구입니다. 폰트 이름과 URL만 입력하면 해당 값을 반영한 @font-face 코드를 바로 만들어줍니다. 모든 계산은 브라우저 안에서만 이뤄지며 서버로 전송되지 않아, 프런트엔드 개발자나 퍼블리셔가 FOUT·FOIT·CLS 이슈를 이해하고 최적의 값을 고를 때 유용합니다.
사용 방법
- 폰트 패밀리 이름과 폰트 파일 URL(또는 경로)을 입력합니다.
- swap, block, fallback, optional, auto 중 비교하고 싶은 font-display 값을 탭에서 선택합니다.
- 차단 기간·전환 기간과 로딩 타임라인 그래프로 해당 값의 동작 방식을 확인합니다.
- 아래에 자동 생성된 @font-face 코드를 복사 버튼으로 복사해 프로젝트 CSS에 붙여넣습니다.
자주 묻는 질문
- font-display 값 중 어떤 걸 골라야 하나요?
- 가독성을 우선한다면 swap, 레이아웃 흔들림(CLS)을 최소화하고 싶다면 optional이 흔히 권장됩니다. 도구의 타임라인과 설명을 비교해 사이트 상황에 맞는 값을 선택하세요.
- 생성된 코드를 그대로 써도 되나요?
- font-family, src 경로, font-display 값이 반영된 기본 @font-face 규칙이 생성됩니다. font-weight나 font-style이 다른 굵기/스타일을 쓴다면 값을 프로젝트에 맞게 조정하면 됩니다.
- 입력한 폰트 URL이 서버로 전송되나요?
- 아니요. 입력값은 브라우저 내에서만 코드 조합에 사용되며 어디로도 전송되지 않습니다.