웹폰트 적용하기

티스토리 뷰

리뷰/폰트

웹폰트 적용하기

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

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

폰트를 수정했으면 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으로 제공하고있습니다.

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

구글 웹폰트 보러가기

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

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

공감

sns신고

저작자표시비영리변경금지

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

구글의 새로운 한글 웹폰트 (39)	2018.06.28
다온폰트 무료다운로드 이벤트 (16)	2018.05.31
디자인210 본문쉐어패키지 폰트 무료다운로드 이벤트 (18)	2018.03.12
웹폰트 적용하기 (10)	2018.02.22
폰트 수정하기 (15)	2018.02.21
디자인210 폰트 무료 다운로드 이벤트 (24)	2017.12.06
2017 한글날 기념 무료배포 폰트모음 (14)	2017.10.14
디자인210 수필명조 무료폰트 이벤트 (21)	2017.03.31

공유하기 링크

페이스북
카카오스토리
트위터

*저녁노을* 어렵습니다
노을인ㅎㅎ 2018.02.22 22:05 신고
ⓘ 수정/삭제 댓글쓰기
청춘일기 더 어려운 요리를 잘 하시잖아요^^ ㅎㅎ 2018.02.23 20:34 신고
ⓘ 수정/삭제
_Chemie_ 앗 오늘은 첫 댓글 놓쳤네요ㅋㅋㅋ
폰트 수정하는 방법은 여기저기서 많이 본 것 같기는 한데
저는 이런것도 어려워서 그냥 기본 폰트만 사용하고 있어요ㅋㅋ
티스토리 좋은 게 스킨을 마음대로 설정할 수 있는 거라고 알고 있기는 한데
섣불리 도전하기에는 외계어의 장벽이 너무 높아요ㅠㅁㅠ 2018.02.23 06:20 신고
ⓘ 수정/삭제 댓글쓰기
청춘일기 방문해주시는 것만도 감사합니다 ^^
티스토리 최대 장점이 스킨설정의 자유죠. 그래서 각자의 개성이 묻어나는 스킨을 만들수 있다는게 좋은 것 같아요.
외계어보다 어려운 영어를 하시는게 저는
더 부러운데요^^ ㅎㅎ 2018.02.23 20:38 신고
ⓘ 수정/삭제
peterjun 웹폰트 적용 관련으로 잘 보았어요.
저도 예쁘게 하고 싶은데...기본 폰트로 쓰고 있네요. ㅎㅎ 2018.02.24 03:06 신고
ⓘ 수정/삭제 댓글쓰기
Normal One 오.. 변환 프로그램 좋네요.ㅎㅎㅎ
예전에 한창 폰트에 관심 많을때도 웹에 있던 폰트만 썼었어서 이런 것까진 몰랐었는데...!!

요거 기억해둘게요 :) 2018.02.25 21:44 신고
ⓘ 수정/삭제 댓글쓰기
보나 맥북에서는 파일이 안열리네요ㅠㅠㅠㅠ방법좀알려주세요₩ 2018.06.06 15:04 신고
ⓘ 수정/삭제 댓글쓰기
청춘일기 죄송합니다. 위 파일들은 윈OS 파일이라 맥에서는 사용할 수 없습니다.
윈도우즈 환경에서 하는 수밖에 없을것 같습니다. 2018.06.07 16:08 신고
ⓘ 수정/삭제
이은수 폰트 css 파일을 만들어서 적용하면 기존의 page title을 다르게 적용했던 폰트도 변경 되나요?? 2018.07.07 21:36 신고
ⓘ 수정/삭제 댓글쓰기
청춘일기 네 css가 일괄적으로 스타일을 관리하기 위해 만들어진거에요 제목 폰트를 바꾸면 나머지 페이지들도 모두 변경 된답니다 2018.07.08 09:04 신고
ⓘ 수정/삭제