@font-face CSS 생성기
폰트 패밀리·굵기·경로 입력으로 WOFF2/WOFF/TTF @font-face 코드 즉시 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
웹 폰트를 적용할 때마다 매번 손으로 작성하던 @font-face 규칙을 양식에 값만 채워 바로 만들어주는 도구입니다. 폰트 이름, 굵기, 스타일과 WOFF2·WOFF·TTF 파일 경로를 입력하면 브라우저 호환성을 고려한 표준 CSS 코드가 실시간으로 만들어지며, 모든 처리는 브라우저 안에서만 이뤄져 서버로 전송되지 않습니다.
사용 방법
- 폰트 패밀리 이름과 굵기(Weight), 스타일(Normal/Italic)을 선택합니다.
- WOFF2, WOFF, TTF 각 파일의 경로(URL)를 입력합니다.
- 아래에 실시간으로 생성되는 @font-face CSS 코드를 확인합니다.
- 복사 버튼을 눌러 코드를 그대로 스타일시트에 붙여넣습니다.
자주 묻는 질문
- 이 도구가 실제로 폰트 파일을 TTF에서 WOFF로 변환해주나요?
- 아니요, 실제 파일 포맷 변환은 하지 않습니다. 이미 준비된 WOFF2/WOFF/TTF 파일들의 경로를 지정하면 이를 연결하는 표준 @font-face CSS 코드를 생성해주는 도구입니다.
- 왜 WOFF2, WOFF, TTF를 모두 넣어야 하나요?
- 브라우저마다 지원하는 포맷이 달라 fallback 체인을 구성하는 것이 웹 표준 관행입니다. 최신 브라우저는 용량이 가장 작은 WOFF2를 사용하고, 지원하지 않는 구형 환경에서는 순서대로 WOFF, TTF로 대체됩니다.
- 생성된 코드는 그대로 사용해도 되나요?
- 네, font-display: swap이 포함된 표준 형식이라 별도 수정 없이 CSS 파일에 붙여넣어 바로 사용할 수 있습니다.