폰트 로딩 CSS 생성기
@font-face CSS와 선택적 preload 마크업을 만들고 font-display 설정을 빠뜨리지 않게 도와줍니다.
이 도구에 대해
font-display와 crossorigin preload 같은 세부 설정을 빠뜨리지 않고 운영용 폰트 로딩 코드를 만들 수 있습니다.
원격 폰트 제공자를 자체 호스팅 WOFF2 파일로 바꿔 성능을 직접 관리하려는 경우에 유용합니다.
결과
사용 방법
- 1
필요한 값을 입력하거나 텍스트를 붙여넣습니다.
- 2
옵션이나 단위를 원하는 방식으로 조정합니다.
- 3
표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.
기능
즉시 결과
값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.
브라우저 처리
입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.
간단한 입력
반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.
무료 사용
가입이나 설치 없이 바로 사용할 수 있습니다.
주요 사용 사례
- ›자체 호스팅 폰트용 @font-face CSS를 만듭니다.
- ›첫 화면에 꼭 필요한 폰트 하나만 preload하도록 마크업을 생성합니다.
- ›swap, optional, fallback, block, auto 동작을 비교해 선택합니다.