ttf 폰트 웹폰트로 변환하여 사용하기

Browser 지원

웹폰트에 사용하는 폰트는 ttf/otf, .eot, .woff, .woff2,.svg 등이 사용됩니다. 인터넷 브라우저 마다 웹폰트 확장자 지원이 다르기 때문에 다양한 확장자로 변환하여 셋팅하여 사용합니다.

ttf 폰트로 웹폰트 변환

아래 사이트에 적용하여 웹폰트 확장자를 선택해줍니다. font-face 부터 woff2 까지 선택해주었습니다. 이후 select fonts 를 선택해줍니다.

• https://onlinefontconverter.com/

자기가 원하는 폰트.ttf 파일을 드래그 한 후 done 버튼을 누르면 웹폰트로 변환이 되고 save your fonts 버튼을 눌러 다운을 받습니다.

변환된 웹폰트 압축파일을 download all attachments 버튼을 선택하여 다운을 받습니다.

다운받은 파일을 압축을 푸니 아래와 같이 파일을 확인할 수 있었고 font.css 파일도 제공해줍니다.

@font-face 구문(Syntax)

ttf 파일을 웹폰트로 변환하여 아래의 구문처럼 셋팅을 하면 웹폰트가 적용되어 사용할 수 있습니다. 왠만한 한글 웹폰트는 다운받아서 사용할 수 있지만 TTCommons 라는 영문폰트는 웹폰트로 다운 받을 수 있는 곳이 없어 직접 변환하여 적용하여 사용했습니다.

@font-face {
  font-family: 'TTCommons-Medium';
  src: url('TTCommons-Medium.eot');
  src: url('TTCommons-Medium.eot?#iefix') format('embedded-opentype'),
       url('TTCommons-Medium.svg#TTCommons-Medium') format('svg'),
       url('TTCommons-Medium.ttf') format('truetype'),
       url('TTCommons-Medium.woff') format('woff'),
       url('TTCommons-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;