웹폰트 적용하기

웹폰트 적용하기

2018. 2. 22.ㆍ리뷰/폰트ㆍ💬댓글

728x90

웹폰트 적용하기

사실 웹폰트 적용하기에 관련된 포스팅은 검색만 해도 차고 넘쳐서 저까지 쓸 필요가 없을 정도지만

폰트 수정하기 포스팅을 했으니 이어서 간단히만 적어볼까 합니다

폰트를 수정했으면 ttf폰트파일이 만들어졌겠죠

웹폰트로 사용하기 위해서는 ttf 파일을 eot파일과 woff파일로 변환 해야합니다.

* eot파일은 마이크로소프트에서 만든 규격으로 대부분 IE8 이전버전을 위해 사용한다고 보면 됩니다

* woff파일은 모질라를 대표로 다양한 그룹이 함게 만든 포맷인데 대부분의 브라우저에서 지원됩니다.

'구형 브라우저 알게뭐야' 한다면 woff파일만으로도 충분합니다^^;

eot 파일변환

www.eotfast.com에서 제작한 파일을 사용하면 되는데

홈페이지가 팔렸는지 이상한 스팸사이트가 되었네요;

EOTFAST-1.EXE

파일만 따로 업로드 했습니다

탐색기를 열고 폰트파일을 위에 다운받은 exe파일 위로 드래그&드롭 해주면 변환된 eot파일이 생성됩니다.

위 ttf파일은 1.4M가 넘네요@_@

다행히도 변환하면 400KB대로 줄어듭니다

woff 파일변환

developer.mozilla.org/en-US/docs/Web/Guide/WOFF

모질라 가이드 사이트만 있고 다운페이지로 연결이 안되는군요

sfnt2woff.exe

역시 파일만 따로 업로드 했습니다

변환방법은 위와 같습니다

폰트파일을 위 exe파일 위로 드래그&드롭해주면 파일이 생성됩니다

위 2개의 파일을 업로드 해준뒤 스킨설정에서 css, html에 적용해주면 됩니다

우선 아래처럼 css파일을 하나 만듭니다

* 여기는 설명부분

* 폰트이름 (Korean)

@font-face {

font-family: '폰트이름(원하는걸로)';

font-style: normal;

font-weight: 400;

src: url(// "업로드된 url주소" .eot);

src: url(// "업로드된 url주소" .eot?#iefix) format('embedded-opentype'),

url(// "업로드된 url주소" .woff) format('woff'),

}

업로드된 파일의 url 주소는 아래처럼 스킨설정에 들어가서 해당 파일을 우클릭하면 알 수 있습니다

여러 개의 웹폰트를 하나의 css로 만들어서 사용해도 됩니다

위에 작성한 css파일도 업로드 후 URL주소를 복사합니다

스킨설정의 html의 <head> ~ </head> 사이에 위 코드를 넣어줍니다

body {font-family:'폰트이름(위에 원하는걸로 정한 이름)';}

스킨설정의 css에서 웹폰트 적용을 원하는 부분에 설정값을 넣어줍니다

위는 body 값에 넣어주었고 어느 부분에 폰트값을 넣어야 할지는 모르겠을 때에는

예전에 작성한 팁을 참고하시기 바랍니다

웹폰트를 적용하는 다양한 방법 중에 간단하다고 생각한 방법을 소개했는데

뭔가 잘 설명이 안 된 느낌이^^;

더 전문적인건 구글 검색 고고(무책임;)

특별히 수정한 파일이 아니라면 구글에서 나눔폰트를 CDN으로 제공하고있습니다.

코드만 가져다 쓰면 귀찮은 변환, 업로드 없어도 간단히 웹폰트를 적용할 수 있습니다

구글 웹폰트 보러가기

추가로 제 포스팅 소제목에 사용되고 있는

이 링크폰트(→) 이롭게 바탕체도 무료 웹폰트를 제공하고 있으니 참고하세요^^

728x90

저작자표시 비영리 변경금지 (새창열림)

'리뷰 > 폰트' 카테고리의 다른 글

다온폰트 무료다운로드 이벤트 (16)	2018.05.31
디자인210 본문쉐어패키지 폰트 무료다운로드 이벤트 (19)	2018.03.12
폰트 수정하기 (16)	2018.02.21
디자인210 폰트 무료 다운로드 이벤트 (25)	2017.12.06
2017 한글날 기념 무료배포 폰트모음 (15)	2017.10.14

공지사항

태그

댓글

'리뷰 > 폰트' 카테고리의 다른 글

[리뷰/폰트] 비슷한 글 보기

블로그 🔥 인기글

7일간 조회수가 높은 순서로 자동 집계됩니다.

블로그 ✅ 최신글

티스토리툴바