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

[nest.js]nest.js, node.js, 프로젝트 생성 방법

Node.js 설치 Node.js의 공식 웹사이트(nodejs.org)에서 Windows용 인스톨러를 다운로드합니다. 다운로드한 인스톨러를 실행하여 설치합니다. Node Version Manager(NVM)을 사용하는 경우 nvm install node # 최신 버전 설치 nvm install 14 #...

[광주]위파크 더 센트럴 분양주택 분양안내

기본정보 공급위치: 광주광역시 서구 풍암동 10-12번지 일원 공급번호: 2023000351 공급규모: 625세대 분양/입주: 분양 2023-08-04 / 입주 2026-08 건설사: (주)호반건설 (주)라인건설 분양문의: 1670-5676 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.wepark-central.co.kr/ 모집공고문 보기 청약일정 모집공고일: 2023-08-04 청약접수: 2023-08-14...

[강원]힐스테이트 속초 분양주택 분양안내

기본정보 공급위치: 강원특별자치도 속초시 금호동 622-40 일원 공급번호: 2023000337 공급규모: 925세대 분양/입주: 분양 2023-07-21 / 입주 2026-05 건설사: 현대엔지니어링(주) 분양문의: 033-947-0925 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.hillstate-sokcho.co.kr 모집공고문 보기 청약일정 모집공고일: 2023-07-21 청약접수: 2023-07-31 ~...

GSAP와 ScrollTrigger 플러그인을 사용하여 여러 패널을 고정 시키는 방법

여러 패널 고정시키는 방법 GSAP (GreenSock Animation Platform)과 ScrollTrigger 플러그인을 사용하여 여러 패널을 스크롤 위치에 따라 고정하는 기능을 구현할 수 있습니다. <section id="section1" class="parallax__item"></section> <section id="section2"...