본문 바로가기
Front-end/HTML

ttf폰트 직접 웹폰트 업로드해 사용하기

by mooyou 2019. 1. 12.
728x90
300x250

▶ 웹에서 사용할수 있는 폰트


TrueTypeFont(*.ttf) : 트루타입은 애플과 마이크로소프트에 의해 1980년대 후반에 개발된 글꼴 표준

OpenTypeFonts(*.otf) : 오픈타입은 확장가능한 마이크로소프트 컴퓨터 글꼴 형식

The Web Open Font Format(*.WOFF) : WOFF는 W3C에서 추천하는 글꼴 형식

The Web Open Font Format(WOFF2.0) : WOFF에서 향상된 글꼴

SVG폰트(*.svg, *.svgz) : 벡터방식의 글꼴형식

Embeded Open Type Fonts(*.eot) : 익스플로러 6~8에서 사용하던 웹 폰트 방식


▶ 폰트 포맷 브라우저 지원


구분 

익스플로러

크롬 

파이어폭스 

사파리 

오페라 

 TTF/OTF

O

 O

 O

 O

 O

 WOFF

 O

 O

 O

 O

 O

 WOFF2

 X

 O

 O

 X

 O

 SVG

 X

 O

 X

 O

 O

 EOT

 O

 X

 X

 X

 X


!!!!! 저작권 주의 !!!!


TTF파일을 변환해서 웹폰트로 사용하려면 허락을 받아야 한다. ttf 글꼴을 구입했더라도 그것을 웹폰트로 사용한것까지 허락한 것은 아니기 때문에 무조건 웹폰트로 변환해서 사용하면 안된다.


컴퓨터에서 주로 쓰는 ttf파일은 용량이 너무 크고 변환해서 사용해야 한다.


▶ ttf -> 웹폰트로 변환방법


https://onlinefontconverter.com/


위 사이트로 들어가서


변환할 형식을 체크해준다

하단에 SELECT FONT 글자를 눌러주면


위와같은 창이 나오는데 변환할 *.ttf파일을 불러온다



그러면 하단에 버튼이 생기는데 Done을 눌러주면 변환이 진행된다.





SAVE YOUR FONT를 눌러준다.




다운로드 받는다.





그러면 이렇게 생성된 6개의 파일을 font 폴더에 넣어준다.

온라인폰트컨버터를 이용하면 자동으로 css가 생성되는데

css는 css 폴더에 넣어줘야 하니까 경로를 수정해 준다.




css파일을 연결해준다.






728x90
반응형

댓글