웹 글꼴 세트 만들기
TTF·OTF·WOFF·WOFF2 글꼴을 선택해 WOFF2와 CSS, 확인용 HTML을 만듭니다. 웹사이트에 넣기 전에 견본 문자와 CSS의 이름·굵기·스타일·불러오는 동안의 표시를 확인하고 세트를 ZIP으로 저장할 수 있습니다. 문자를 추려내는 작업은 하지 않습니다.
할 수 있는 것
웹용 파일을 묶기
TTF, OTF, WOFF, WOFF2에서 WOFF2와 CSS, 확인용 HTML을 만듭니다. 폰트를 여러 개 함께 지정할 수 있습니다.
글리프와 CSS 조건 확인
변환한 폰트의 겉모습을 확인합니다. 웹에서 사용할 이름, 굵기, 스타일과 불러오는 중 표시는 필요에 따라 변경할 수 있습니다.
ZIP으로 그대로 전달
fonts 폴더, fonts.css, preview.html을 한 세트로 저장합니다. 파일의 상대적 배치를 유지해 사용할 수 있습니다.
사용 방법
폰트를 함께 선택
웹에서 사용할 수 있는 폰트를 선택합니다. 여러 개를 사용하는 경우 한 번에 지정해 주세요.
겉모습과 웹용 설정 확인
미리 볼 문자를 입력하고 각 폰트를 확인합니다. 이름이나 굵기 등을 조정하려면 해당 폰트의 CSS 설정을 엽니다.
일체를 만들고 ZIP 저장
'웹 폰트 일체 만들기'를 누르고 생성한 webfont-kit.zip을 저장합니다.
풀어서 웹 페이지에 포함
fonts 폴더와 fonts.css, preview.html의 배치를 유지해 풉니다. 사용할 페이지에서 CSS를 불러오고 지정한 폰트 이름을 사용해 주세요.
이럴 때 유용합니다
웹 사이트 공개 준비
가진 폰트를 웹용 형식과 CSS로 묶어 포함에 필요한 파일을 준비합니다.
제작 담당에게 일체로 전달
보통체와 굵은체 등 여러 폰트를 묶어 확인용 문자가 담긴 HTML과 함께 전달합니다.
폰트와 CSS의 연결
WOFF2는 웹에서 쓰는 폰트 형식
원래 문자를 포함한 WOFF2를 준비합니다. 문자를 좁히지 않습니다. 용량은 폰트에 따라 다릅니다.
이름, 굵기, 스타일은 CSS에 등록
웹에서 어떤 지정일 때 이 폰트를 쓸지 결정합니다. 폰트의 글리프를 굵게나 기울임으로 가공하는 설정은 아닙니다.
같은 이름도 굵기와 스타일로 구분
보통체와 굵은체는 같은 이름으로 사용할 수 있지만, 이름, 굵기, 스타일의 조합을 중복시킬 수는 없습니다.
불러오는 중 표시 선택
초기 설정에서는 대체 폰트를 먼저 표시하고 준비가 되면 전환합니다. 필요하면 CSS 설정에서 기다리는 방식이나 전환 방식을 바꿀 수 있습니다.
상대적 배치 유지
fonts.css에서 fonts/font-1.woff2 등을 참조합니다. 폴더나 CSS의 위치를 바꾸는 경우에는 참조 경로도 함께 조정해 주세요.
자주 묻는 질문
생성한 파일은 어디에 배치하나요?
ZIP을 풀고 fonts 폴더와 fonts.css, preview.html의 상대 위치를 유지해 배치합니다. 자신의 페이지에서 fonts.css를 불러오고 지정한 폰트 이름을 CSS에서 사용해 주세요.
형식 변환만 하는 기능과의 차이는?
이 화면은 WOFF2와 함께 CSS와 확인용 HTML을 묶습니다. 폰트 형식만 바꾸고 싶다면 '폰트 형식 변환'을 사용하세요.
사용하는 문자만으로 좁힐 수 있나요?
이 화면에서는 문자를 좁히지 않습니다. 원래 문자를 유지한 폰트를 준비하는 용도입니다.
굵기를 바꾸면 글자가 굵어지나요?
설정하는 것은 CSS에서 사용할 굵기 값입니다. 폰트 파일의 글리프를 가공하는 기능은 아닙니다. 굵게나 기울임을 사용하려면 그 글리프를 가진 파일을 준비해 주세요.
같은 폰트 이름으로 여러 파일을 사용할 수 있나요?
굵기나 스타일을 바꿔 등록할 수 있습니다. 같은 이름, 굵기, 스타일의 조합이 겹치면 해당 설정을 다시 확인해 주세요.
폰트를 다시 선택하면 어떻게 되나요?
현재 폰트 일체와 생성한 ZIP을 제거하고, 새로 선택한 일체를 불러옵니다. 계속 사용할 파일도 함께 선택해 주세요.
견본 문자를 모두 표시할 수 없는 경우에는?
폰트에 포함되지 않은 문자는 다른 폰트로 표시될 수 있습니다. 표시할 수 있는 문자와 사용할 곳에서의 겉모습을 확인해 주세요.
폰트를 불러올 수 없는 경우에는?
지원 형식의 폰트를 다시 선택해 주세요. 한 세트 안에 변환, 불러오기를 할 수 없는 파일이 있으면 일부만 성공 결과로 저장하지 않습니다.
입력과 결과
- 입력
- TTF, OTF, WOFF, WOFF2. 여러 개를 함께 선택할 수 있습니다.
- 조건
- 웹 임베딩을 포함해 입력 폰트의 이용 조건을 확인해 주세요.
- 설정
- CSS에서 사용할 이름, 굵기, 스타일, 불러오는 중 표시.
- 출력
- webfont-kit.zip. WOFF2, fonts.css, preview.html을 포함합니다.