웹폰트 확장자 변환하기

가지고 있는 폰트 파일이 ttf 확장자일 경우, 웹폰트로 사용하기 위해 woff, woff2, eot 등으로 변환하는 과정을 정리했습니다.

웹 폰트 다운로드

Google Fonts 사이트에서 원하는 폰트를 선택해 다운로드합니다.

영문, 숫자, 특수 문자 폰트에만 Open Sans를 적용하고 싶었기 때문에 해당하는 서체를 담아봅니다.

Google Fonts 사이트에서 원하는 폰트 선택하기

오른쪽 아래의 Download all 버튼을 눌러서 다운받은 후 압축을 풀면, 아래와 같이 파일을 확인할 수 있습니다.

이탤릭 스타일까지 포함해서 다운받아졌다

이탤릭 서체는 필요 없는데 함께 다운받아집니다. Google Fonts에서 서체 스타일도 선택해서 다운 받을 수 있다면 더 좋겠네요.
필요 없기 때문에 이탤릭 서체는 삭제합니다.

확장자 변환하기

브라우저 지원

브라우저가 지원하는 웹폰트 확장자는 ttf, otf, eot, woff, woff2, svg 가 있습니다. 다만 인터넷 브라우저마다 지원하는 확장자가 다르기 때문에 잘 확인하고 변환한 후 사용해야합니다.

폰트 확장자	IE	Chrome	Firefox	Safari	Opera
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	3.2	Not supported

변환 사이트에서 폰트 확장자 변환

제가 즐겨 사용하는 서체 변경 사이트는 Online Font Converter 입니다.
변환 과정에 군더더기가 없어서 좋아요.

onlinefontconverter.com 사이트에서 변환하고 싶은 폰트 확장자 선택하기

사이트에 방문하면 위와 같은 화면이 뜹니다. 체크박스로 원하는 확장자를 선택하고 Select Font(s) 를 클릭합니다.

변환하고자 하는 폰트를 드롭다운

Drop files here 회색 영역에 폰트를 드롭다운 해줍니다.

변환 완료된 후 Save Your Font 텍스트를 클릭

변환 완료된 폰트 파일들은 Save your font 텍스트를 클릭하면 다운 받을 수 있는 사이트로 이동됩니다.

Download all attachments 버튼으로 다운받을 수 있는 화면

Download all attachments 버튼을 클릭하면 폰트 파일이 다운받아집니다.

다운된 파일의 압축을 푸니 서체 웨이트별로 파일이 나뉘어져 있다

서체 무게 (Font Weight)별로 압축 파일이 따로따로 떨어집니다.

ttf 포함 모든 포맷을 모아둔 폴더

모든 압축 폴더를 풀어서 모든 폰트 웨이트와 포맷을 포함해둔 폴더입니다! 😎
이대로 웹서비스에 적용하면 끝.