웹폰트 소스, 시스템 폰트 TTF -> WOFF/WOFF2/OTF 웹폰트로 변환하기

 

구글폰트나 한글의 경우 눈누난나 사이트 이용하며 웹폰트를 쉽게 사용할 수 있지만 공개되어있지 않은 폰트의 경우 직접 웹폰트를 만들어주어야한다. TTF 파일이 있다면 웹폰트(woff, woff2, otf 확장자)로 확장자를 변경해주고, 파일들을 인클루드 해주면 쉽게 웹폰트 사용이 가능하다. 단, 웹폰트로 사용해도 저작권/라이센스 문제가 없는지 확인 후 사용해야한다.

 

 

웹폰트(WOFF, WOFF2, OTF)로 변환하기

 

1) 폰트 확장자를 변경해주는 https://cloudconvert.com/ 사이트에 접속한다.

CloudConvert

 

2) conver TTF to WOFF, WOFF2, OTF를 선택 후 변환할 폰트파일(.ttf)을 업로드한다.

 

 

참고로 TTF (True Type Font)는 애플+마이크로소프트가 만든 폰트, OTF(Open Type Font)는 어도비+마이크로소프트가 만든 폰트로 고해상도 출력작업이 필요한 경우,  WOFF(Web Open Font Format)은 TTF와 OTF의 무단배포 등의 문제를 해결하기 위해 모질라, 오페라, 마이크로소프트에서 제안한 웹폰트 파일 형식이라고 한다. WOFF2는 WOFF에 비해 30%~50%정도 더 압축이 되어 훨씬 가볍다고 한다.

 

 

 

3) Add more Files을 눌러 파일을 업로드하면 한꺼번에 여러개 파일을 변환이 가능하다.

변환할 파일 업로드 후, Convert를 눌러 파일을 변환한다.

 

 

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'); 
}

* font-family : 폰트 이름, 사용하기 편한 폰트명을 입력하면 된다.

* font-style : 보통의 경우 normal를 입력

* font-weight : 폰트 굵기를 입력해 준다. (100~900까지)

* src : url('폰트경로') 이 부분에 폰트 절대/상대 경로를 입력하면 된다. 홈페이지 서버 내에 woff2, woff, otf폰트가 있는 경로를 잘 넣어주고, 폰트 파일명도 업로드된 파일 명 그대로 동일하게 넣어 주어야 한다.

 

 

폰트 굵기가 여러개 있는 폰트의 경우 아래처럼 font-family 값은 동일하되, font-weight와 파일 경로만 변경해서 굵기별로 넣어주면 된다.

 

@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로 변환 파일