웹 폰트 CSS @font-face 코드 메이커
요청한 웹 폰트 파일들을 정의하는 표준 CSS @font-face 스타일시트 선언문 자동 생성
자체 제작 폰트나 로컬 폰트 파일(woff2, woff, ttf)을 웹 프로젝트에 적용할 수 있도록 표준 호환성이 높은 `@font-face` CSS 코드를 자동으로 빌드해 주는 설정 도구입니다. 별도의 프로그램 설치나 복잡한 회원가입 없이 웹 브라우저에서 즉시 실행되며, 입력한 데이터는 외부 서버로 유출되지 않고 안전하게 로컬 환경에서 처리됩니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 웹 폰트의 패밀리명(Font Family Name)을 입력합니다.
- 준비된 WOFF2, WOFF, TTF 폰트 파일의 웹 경로(URL)를 입력합니다.
- 두께(Weight), 스타일, 폰트 디스플레이 옵션을 선택한 뒤 생성된 CSS 블록 코드를 복사하여 사용합니다.
자주 묻는 질문
- font-display: swap 속성은 왜 권장되나요?
- 폰트 파일이 완전히 로드되기 전까지 시스템 기본 폰트로 텍스트를 먼저 렌더링하여 보여줌으로써 웹페이지 로딩 속도 체감 및 사용자 이탈율을 줄여주는 웹 성능 최적화 기법입니다.
- Regular, Bold처럼 두께가 다른 폰트 파일 여러 개를 한 번에 등록하려면 어떻게 하나요?
- 이 도구는 한 번에 하나의 @font-face 블록을 생성하므로, 두께(weight)별로 파일 경로와 font-weight 값을 바꿔가며 여러 번 생성한 뒤 그 결과들을 이어 붙이면 됩니다. 이렇게 하면 같은 font-family 이름 아래 Regular는 font-weight: 400, Bold는 font-weight: 700처럼 브라우저가 자동으로 알맞은 굵기 파일을 골라 쓰게 할 수 있습니다.
- Regular, Bold처럼 두께가 다른 폰트 파일 여러 개를 한 번에 등록하려면 어떻게 하나요?
- 이 도구는 한 번에 하나의 @font-face 블록을 생성하므로, 두께(weight)별로 파일 경로와 font-weight 값을 바꿔가며 여러 번 생성한 뒤 그 결과들을 이어 붙이면 됩니다. 이렇게 하면 같은 font-family 이름 아래 Regular는 font-weight: 400, Bold는 font-weight: 700처럼 브라우저가 자동으로 알맞은 굵기 파일을 골라 쓰게 할 수 있습니다.