티스토리 뷰
웹폰트 적용하기
사실 웹폰트 적용하기에 관련된 포스팅은 검색만 해도 차고 넘쳐서 저까지 쓸 필요가 없을 정도지만
폰트 수정하기 포스팅을 했으니 이어서 간단히만 적어볼까 합니다
폰트를 수정했으면 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
모질라 가이드 사이트만 있고 다운페이지로 연결이 안되는군요
역시 파일만 따로 업로드 했습니다
변환방법은 위와 같습니다
폰트파일을 위 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주소를 복사합니다
<link rel="stylesheet" href="// (업로드한 css파일 url주소) .css">
스킨설정의 html의 <head> ~ </head> 사이에 위 코드를 넣어줍니다
body {font-family:'폰트이름(위에 원하는걸로 정한 이름)';}
스킨설정의 css에서 웹폰트 적용을 원하는 부분에 설정값을 넣어줍니다
위는 body 값에 넣어주었고 어느 부분에 폰트값을 넣어야 할지는 모르겠을 때에는
예전에 작성한 팁을 참고하시기 바랍니다
웹폰트를 적용하는 다양한 방법 중에 간단하다고 생각한 방법을 소개했는데
뭔가 잘 설명이 안 된 느낌이^^;
더 전문적인건 구글 검색 고고(무책임;)
특별히 수정한 파일이 아니라면 구글에서 나눔폰트를 CDN으로 제공하고있습니다.
코드만 가져다 쓰면 귀찮은 변환, 업로드 없어도 간단히 웹폰트를 적용할 수 있습니다
추가로 제 포스팅 소제목에 사용되고 있는
이 링크폰트(→) 이롭게 바탕체도 무료 웹폰트를 제공하고 있으니 참고하세요^^
'리뷰 > 폰트' 카테고리의 다른 글
| 구글의 새로운 한글 웹폰트 (38) | 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 신고
-
윈도우즈 환경에서 하는 수밖에 없을것 같습니다. 2018.06.07 16:08 신고 -
이은수 폰트 css 파일을 만들어서 적용하면 기존의 page title을 다르게 적용했던 폰트도 변경 되나요?? 2018.07.07 21:36 신고
-
- 할로웬을 맞이새서 각종 서비스 업계는 난리네요. 데코도 할로웬 스타일로 잘 해놨네요. 여기도 한창입니다.
- 맛있게 먹고 공감하고 갑ㄴㅣ당.ㅎㅎ 즐거운 휴일 되세요
- 쯔케멘 마치 간찌장처럼 따로나오네요 ㅎㅎㅎㅎㅎ 왠지 마음에 들어요 ㅎㅎㅎ 자세한 정보 감사해요 ㅎㅎㅎ 즐거운주말되세요^^
- 와 이거 아이디어 좋네요 ㅎㅎㅎ 밑에 비닐 늘려서 컵 크기를 늘리다니.. 정말 맨 첨에 늘리기 전에는 엄청 작겠어요 짜장범벅만한 크기이려나... 저도 한번 구매해보고 싶네요 이거 ㅎㅎ 부..
- 윽 지금 보고 있는데 엄청 배고파지네요 라멘 좋아하다보니... 도쿄 라멘스트리트 가보긴 했는데 먹지 않고 온 걸 후회합니다.. 다음에 가면 꼭 먹어봐야겠어요. 저는 원래 쇼유나 시오를 좋..
- 일본식이였군요. 이런 식당을 가보면 새로운 맛을 느낄것 같네요. 일본인들은 음식을 할때 정성을 중요시 하기에 전통이 오래도록 간직 되는것 같습니다. 일본식으로 제대로 드시고 오신것..
- 머리끈이 있는 것이 손님을 생각한다는 게 잘 느껴지네요. 가오나시 돌멩이 ㅋㅋㅋㅋ 아담한 카페 같아서 분위기도 좋은 것 같네요 ㅎㅎ
- 가오나시 깨알귀엽네여ㅎㅎ라멘맛나보여요ㅜㅜㅜ
- 저는 일본라멘을 다양하게 다 좋아하는데 남편은 유독 돈코츠 라멘을 좋아해서 저희가 갔더라도 저길 갔을 것 같네요ㅋㅋ 저희는 미국에서 살다보니 짠 음식에 너무 길이 들었는지 정말 남들..
- 처음에는 크기가 작아도 너무 작은게 아닌가 생각했는데 이런 반전이!!! 정말 여행을 위한 패키지로군요!ㅋㅋㅋㅋ 포장도 참 귀엽고ㅋㅋㅋ 조금 긴 여행갈 때 저렇게 1박스 사가기 딱 좋을..
- 한자를 보고 무슨 라면이지? 싶었는데, 광고 보고 발음 들으니까 좀 알겠네요. 돈코츠, 미소, 시오, 츠케멘.. 이런거요. 주문하는 데에는 영어나 한국어 번역이 있으니 한결 수월하겠지만,..
- 라면은 다이어트의 적이기도 하지만 사랑이기도하죠 ㅋㅋ 저 살때는 운이좋았는지 계속 품절이구만요;ㅁ;