웹 폰트 CSS @font-face 코드 메이커
요청한 웹 폰트 파일들을 정의하는 표준 CSS @font-face 스타일시트 선언문 자동 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
자체 제작 폰트나 로컬 폰트 파일(woff2, woff, ttf)을 웹 프로젝트에 적용할 수 있도록 표준 호환성이 높은 `@font-face` CSS 코드를 자동으로 빌드해 주는 설정 도구입니다.
사용 방법
- 웹 폰트의 패밀리명(Font Family Name)을 입력합니다.
- 준비된 WOFF2, WOFF, TTF 폰트 파일의 웹 경로(URL)를 입력합니다.
- 두께(Weight), 스타일, 폰트 디스플레이 옵션을 선택한 뒤 생성된 CSS 블록 코드를 복사하여 사용합니다.
자주 묻는 질문
- font-display: swap 속성은 왜 권장되나요?
- 폰트 파일이 완전히 로드되기 전까지 시스템 기본 폰트로 텍스트를 먼저 렌더링하여 보여줌으로써 웹페이지 로딩 속도 체감 및 사용자 이탈율을 줄여주는 웹 성능 최적화 기법입니다.