ttf → woff 변환 온라인 변환 도구 'convertio'

이전에도 소개했었던 온라인 웹툴 중에 Convertio 라는 온라인 변환 사이트가 있습니다. 이곳에는 이미지 뿐만 아니라 다양한 파일들을 쉽게 변환할 수 있습니다. 웹사이트에서 다운받은 폰트를 적용하기 위해서는 woff 확장자로 변환을 해주어야 합니다. 이를 위해서 간단하게 변환하는 과정을 살펴보겠습니다.

ttf(True Type Font, 트루타입 글꼴)

1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장 형식. 한때 비트맵을 대체하여 Windows 글꼴이 대부분 이 형식이었으나 지금은 레거시 기술로 넘어가고 최신 Windows의 기본 글꼴은 대부분 OTF로 대체되었다. 제어점이 3개인 2차 베지어 곡선(Quadratic Bezier)을 사용한다.

비슷한 글꼴 형식으로 OTF가 있다. 이쪽은 4개의 제어점을 기반으로 하는 3차 베지어 곡선(Cubic Bezier)을 사용한다.

TTF는 글꼴을 포맷하지 않고도 인쇄기에 인쇄할 수 있다는 장점이 있다. 인쇄할 때 나오는 글꼴과 화면상의 글꼴이 동일해서 전자출판이 유용하다. 무엇보다도 묻지도 따지지도 않고 모든 응용 소프트웨어에서 사용 가능한 외곽선 글꼴이 사용되기 때문에 문자 크기가 커져도 선이 거칠지 않다.

일반적으로 웹사이트에서 사용할 폰트는 ttf를 woff로 변환하는 것이 무난합니다. otf도 가능하기는 하지만, 사용환경과 용도에 따라 다릅니다.

 

다양한 글꼴 변환을 지원합니다. WOFF는 Web Open Font Format으로 말 그대로 웹에서 사용하기에 적합한 폰트형식입니다. 따라서 시스템 폰트를 웹폰트로 변환해주는 작업이 필요합니다. 다른 글꼴 확장자도 마찬가집니다.

 

웹에서 다운받은 ttf 글꼴 파일이 있으면 업로드 하여 간단하게 변환할 수 있습니다. 변환방법도 매우 쉽습니다. 이렇게 얻은 woff를 각 사이트의 루트 위치에 저장한 다음 font-face로 불러올 수 있습니다.

 

글꼴 적용방법(스타일시트)

@font-face {
    font-family: '글꼴 이름';
    src: url('./images/글꼴 이름.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

글꼴 적용방법은 위와 같습니다. 스타일 시트에 위와 같이 글꼴 이름과 위치를 지정해주고 다른 요소에 웹 폰트를 변경할 때, 폰트 명을 작성해주면 웹폰트로 할용하 수 있습니다. CDN을 활용하는 방법도 있지만, 이 방법이 가장 속도가 빠르기 때문에 저는 이 방법으로 폰트를 적용하는 걸 선호합니다.