구글폰트나 한글이라면 웹폰트를 눈누나 홈페이지를 이용하면 쉽게 사용할 수 있지만, 미공개폰트라면 웹폰트를 직접 만들어야 한다.
TTF 파일이 있는 경우 확장자를 웹폰트(woff, woff2, otf 확장자)로 변경하고 파일을 포함하면 웹폰트를 쉽게 사용할 수 있습니다.
단, 웹폰트로 사용하더라도 저작권/라이선스 문제가 없는지 확인 후 사용하셔야 합니다.
웹폰트(WOFF, WOFF2, OTF)로 변환
1) 글꼴 확장자 변경 https://cloudconvert.com/ 웹사이트 방문
클라우드 변환
압축 병합 캡처 웹사이트 아카이브 생성 아카이브 추출 아카이브 변환 +200개 형식 지원 CloudConvert는 파일 변환을 위한 다목적 앱입니다.
거의 모든 오디오, 비디오, 문서, eBook, 아카이브, 이미지, 스프레드시트 및 프레젠테이션 형식을 지원합니다.
cloudconvert.com
2) 전환 TTF 도착하다 와프, 와프2, OTF선택한 후 변환할 글꼴 파일(.ttf)을 업로드합니다.
참고로 TTF(True Type Font)는 Apple + Microsoft에서 만든 글꼴이고 OTF(Open Type Font)는 Adobe + Microsoft에서 만든 글꼴입니다.
모질라, 오페라, 오페라 마이크로소프트가 폰트 무단 배포 등의 문제를 해결하기 위해 제안한 웹폰트 파일 포맷이라고 합니다.
WOFF2는 30%~50% 압축되어 있기 때문에 WOFF보다 훨씬 가볍다고 합니다.
3) 파일 추가를 클릭하여 파일을 업로드하면 여러 파일을 한 번에 변환할 수 있습니다.
변환할 파일을 업로드한 후 변환을 클릭하면 파일이 변환됩니다.
4) 잠시 기다리시면 다운로드 버튼이 활성화 됩니다.
한 번에 여러 개를 수행하면 일부 파일이 손실되므로 손실된 파일을 한 번 더 확인할 수 있습니다.
5) WOFF로 변환할 경우 동일한 방법으로 WOFF2와 OTF로 변환한다.
6) 변환된 폰트 파일을 서버에 업로드 합니다.
웹 글꼴 코드 편집
아래 코드를 편집한 후 파일에 직접 삽입하거나 font.css 파일로 저장하여 포함합니다.
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 100;
src: url(../fonts/NotoSansKR-Thin.woff2) format('woff2'),
url(../fonts/NotoSansKR-Thin.woff) format('woff'),
url(../fonts/NotoSansKR-Thin.otf) format('opentype');
}* 글꼴 패밀리 : 글꼴 이름, 편리한 글꼴 이름을 입력합니다.
* 글꼴 스타일 : 정상적인 상황에서 정상 입력
* 단어 가중치 : 글꼴 두께를 입력합니다.
(100에서 900까지)
* 원천 : URL(‘글꼴 경로‘) 이 필드에 글꼴에 대한 절대/상대 경로를 입력합니다.
홈페이지 서버에 woff2, woff, otf 글꼴의 경로를 입력하고, 글꼴 파일명은 업로드된 파일명과 일치해야 합니다.
여러 글꼴 두께가 있는 글꼴의 경우 글꼴 패밀리 값은 아래와 같이 동일하지만 글꼴 두께와 파일 경로만 변경되어 가중치별로 입력됩니다.
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 100;
src: url(../fonts/NotoSansKR-Thin.woff2) format('woff2'),
url(../fonts/NotoSansKR-Thin.woff) format('woff'),
url(../fonts/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 300;
src: url(../fonts/NotoSansKR-Light.woff2) format('woff2'),
url(../fonts/NotoSansKR-Light.woff) format('woff'),
url(../fonts/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
src: url(../fonts/NotoSansKR-Regular.woff2) format('woff2'),
url(../fonts/NotoSansKR-Regular.woff) format('woff'),
url../fonts/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
src: url(../fonts/NotoSansKR-Medium.woff2) format('woff2'),
url(../fonts/NotoSansKR-Medium.woff) format('woff'),
url(../fonts/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
src: url(../fonts/NotoSansKR-Bold.woff2) format('woff2'),
url(../fonts/NotoSansKR-Bold.woff) format('woff'),
url(../fonts/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 900;
src: url(../fonts/NotoSansKR-Black.woff2) format('woff2'),
url(../fonts/NotoSansKR-Black.woff) format('woff'),
url(../fonts/NotoSansKR-Black.otf) format('opentype');
}
+ 참고로 폰트 파일 확장자를 변환해주는 다른 사이트
https://anyconv.com/ko/woff-byeonhwangi/
WOFF 변환: 온라인에서 파일을 WOFF로 변환
AnyConv Converter는 WOFF를 온라인으로 변환하는 간단하고 무료인 도구입니다.
등록이나 설치가 필요하지 않습니다.
지금 파일을 변환하세요!
anyconv.com