Home IT/WEB ttf 폰트 웹폰트로 변환하여 사용하기

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

Browser 지원

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

ChromeFirefoxOperaSafariIE / Edge
TTF / OTF43.5103.19[1]
WOFF53.611.105.19
WOFF236392310x
SVG4-37[2]x9-24[2]3.2x
EOTxxxx6
browser support

ttf 폰트로 웹폰트 변환

inline ad

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

onlinefontconverter.com
onlinefontconverter.com – 웹폰트 확장자 선택

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

onlinefontconverter.com - 웹폰트 변환
onlinefontconverter.com웹폰트 변환
onlinefontconverter.com – save your fonts 선택

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

onlinefontconverter.com – save your fonts 선택

다운받은 파일을 압축을 푸니 아래와 같이 파일을 확인할 수 있었고 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;

RECENT POSTS

After Effects 엥커포인트 중앙으로 이동하는 방법 및 스크립트

After Effects 에서 애니메이션을 하기 위해서는 움직이는 대상의 Anchor Point 에 따라서 크기나 위치, 회전 등의 차이가 있습니다. After Effect 에서는 Layer content 에...

제주도 도로교통상황, 통제상황 및 이번주 제주도 날씨 2023-01-25

제주도로교통상황 한라산 탐방은 현재 전면 통제중이며 제주시와 서귀포시를 잇는 1100도로, 5.16도로 전 구간은 전차량 통제상황, 소형차의 경우 제1산록도로가 통제 상황입니다. 제주교통통제상황: https://www.jjpolice.go.kr/jjpolice/notice/traffic.htm ...

[EPIC GAME] Horizon Chase Turbo 2022.12.18 까지 무료 다운로드

Horizon Chase Turbo 를 2022.12.18일 01:00 까지 EPIC GAME 에서 무료로 다운 받을 수 있습니다. 오락실 자동차와 같은 레이싱 게임입니다. https://store.epicgames.com/ko/p/horizon-chase-turbo https://www.youtube.com/watch?v=5LMugZ300L8 Horizon Chase Turbo Horizon Chase Turbo는...

제주도로교통상황 및 이번주 제주도 날씨 2022-12-17 현재

제주도로교통상황 한라산 탐방은 현재 전명 통제중이며 제주시와 서귀포시를 잇는 1100도로 전 구간은 통제상황입니다. 5.16도로 마방목지~성판악 / 성판악~숲터널 구간은 소형 자량인 경우 체인을 설치해야만 운행 가능합니다. 제주지방기상청은...