test
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

개미를 퇴치하는 자연적인 방법 중 가장 효과적인 방법 6가지

개미를 자연스럽게 퇴치하는 여러 가지 방법 중 가장 효과적인 몇 가지 방법을 소개하겠습니다. 이 방법들은 모두 집에서 쉽게 구할 수 있는 재료를 사용하여 개미를...

부심장을 지키는 올바른 식단: 먹으면 좋은 음식과 나쁜 음식

부정맥 환자는 심장 건강을 유지하고 증상을 관리하기 위해 특정 음식을 피하고, 심장 건강에 좋은 음식을 섭취하는 것이 중요합니다. 다음은 부정맥 환자가 피해야 나쁜 음식과...

부정맥 arrhythmia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 부정맥(Arrhythmia)은 심장의 정상적인 리듬이 불규칙해지거나 비정상적으로 빨라지거나 느려지는 상태를 말합니다. 이는 심장의 전기적 신호 전달에 문제가 생겨 발생하며, 다양한 원인과 증상을 가지고 있습니다. 원인 부정맥의 원인은...

폐렴 pneumonia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 폐렴(Pneumonia)은 폐의 폐포(air sacs)에 염증이 생겨 액체나 고름이 차는 질환입니다. 주로 세균, 바이러스, 곰팡이 등의 감염에 의해 발생하며, 심한 경우 생명을 위협할 수 있습니다. 원인 폐렴의...