폰트 CSS에 적용하는 방법(feat. 트랜스폰터) 폰트 확장자 변환법,

 

이 포스팅은 ‘폰트 확장자’와 ‘폰트 포맷’이라는 말을 혼용하고 있습니다.

홈페이지 폰트 스타일을 바꾸고 싶을 때는 경우에 따라 두 가지 방법으로 나뉩니다.첫 번째 Google Web 폰트가 제공하는 서체인 경우 html에 직접 link href 태그를 써서 폰트를 표현하는 방법입니다.두번째로 구글 웹 폰트로 제공되지 않는 서체인 경우 cs파일에 사용자의 웹 폰트를 연결하는 방식을 사용합니다. 두 번째 경우가 더 복잡해요.

폰트를 포맷별로 가지고 있지 않으면 모든 브라우저에서 문제없이 사용할 수 없기 때문입니다. 그래서 오늘은 폰트를 포맷별로 저장할 수 있는 방법을 알려드리려고 합니다 그리고 저장된 폰트를 cs에 적용하는 방법까지 알려드릴게요!

출처: www.w3schoo ls.com/css/css3_fonts.asp 위의 표와 같이 브라우저에 의해 지원되는 폰트 확장자가 다릅니다. 따라서 하나의 확장자 폰트 파일에서는 표현된 홈페이지는 모든 브라우저에서 열린다고 단언할 수 없습니다. 아래의 3가지 포맷만 저장해도 거의 모든 브라우저에서 열립니다.

eot(익스플로러 하위 브라우저) woff(최신 브라우저) ttf(기타 브라우저) *여기에서 본격 트랜스포터로 폰트 확장자를 변환해 보자!아래 링크를 클릭하면 트랜스포터 사이트로 이동합니다.링크를 클릭하세요! 🙂

transfonter.org/Add fonts Convert TTF , OTF , WOFF , WOFF 2 or SVG , 10 MB per file . Multiupload and drag – and – drop is supported . The @ font – face CSS rule allows web developers to specify online fonts to display text on their web pages . By allowing authors to provide their own fonts , @ font – face eliminates the need to de … transfonter.org

1. Add fonts를 클릭하여 포맷을 변환하는 폰트를 추가하십시오.

폰트가 추가된 것을 확인하고 변환할 폰트 확장자를 체크합니다.저는 배민사이트에서 한나체 pro.ttf 다운받아서 썼습니다.ttf 포맷은 다운로드 받았으므로 체크 해제하고 필요한 포맷인 woff와 eot을 체크했습니다.

3. Convert(변환하기)를 누르세요.

4. 다운받으세요. 그러면 압축파일 형태로 다운로드 됩니다.

5. 크롬 브라우저라면 왼쪽 하단에서 다운로드 받은 폰트 파일이 압축 파일 형태로 표시됩니다. 폴더를 열고 압축해제한 후 font폴더에 넣어주세요.

6. 선택한 포맷의 폰트 파일이 생성되었음을 확인할 수 있습니다.

*글꼴 굵기가 여러 개인 경우에는 아래와 같이 한 번에 여러 개의 글꼴을 추가하여 일괄 변환할 수 있습니다.

cs에 웹 폰트를 적용해보자!cs 파일에 적용 시 아래와 같이 입력하면 웹 폰트가 연결됩니다.@font-face(폰트페이스) 코드를 의자셋 바로 아래에 선언합니다. 일부분에만 적용하는 서체가 아닌 본 문서체에 적용한다면 body에도 반드시 선언해야 한다는 것을 잊지 마십시오.

– 폰트 패밀리명은 영어로 예약 가능합니다. (마음대로 입력해도 결과값에는 ) – 서체의 굵기가 1개인 경우에는 font-weight 속성을 입력하지 않아도 됨 (입력해도 무의미함, 어차피 굵기는 1개니까)

* 굵기가 여러 폰트의 경우 아래와 같이 사용하는 굵기별로 각각 입력해주세요. 폰트 파일명을 입력할 때, 반드시 파일명에서 복사해 주세요. 포맷 변환 사이트 사용 시 파일명이 변경될 수 있으니 파일명을 꼭 확인! 해 주시고 입력한 굵기별로 표현을 잘 할 수 있는지 꼭 테스트 해보시기 바랍니다.구글 웹 폰트에서 통용되는 폰트가 아니라 자사 서체나 고객사가 제공하는 서체를 사용할 때 이 방법으로 한다. 한마디로 @font-face(폰트페이스)라는 css 함수를 이용해서 외부에 있는 폰트 파일을 연결해서 사용하는 겁니다! 코드 복사를 희망하시는 분은 코멘트합니다. 댓글 남겨주세요 🙂