위에 캡쳐 이미지를 보면 나눔고딕 보통과 나눔고딕 ExtraBold의 차이를 비교해 볼 수 있습니다. 제목에 (24pt) 나눔고딕 보통 폰트에 굵게하는 옵션과 나눔고딕 ExtraBold 폰트를 적용해 보았습니다. 나눔고딕 굵게보다 나눔고딕 ExtraBold가 선이 두꺼우면서도 깔끔해 보이지 않나요? 다음 설명을 보면 그 이유를 알 수 있습니다....
나눔고딕은 굵기에 따라 총 3가지로 나뉩니다. 나눔고딕 Regular(보통), Bold(굵게), ExtraBold(아주굵게).
위에 이미지는 워드에서 144pt로 글자를 입력하고 화면을 캡쳐한 모습입니다. 나눔고딕 보통과 보통에 굵게 옵션을 주어 순서대로 입력한 것인데, 첫 줄과 둘째 줄에 약간 나이가 있습니다. 위에 글자는 아래와는 다르게 경계선이 깔끔하지가 않습니다. 첫 줄은 컴퓨터에 나눔고딕 보통만 설치된 상태에서 굵게를 적용한 것이고, 아랫 줄은 나눔고딕 Bold도 설치한 후 적용한 겁니다.
나눔고딕 Bold, 넌 대체 어디 숨어있니?
나눔글꼴 3가지를 모두 설치했는데도 워드나 포토샵에서 글꼴 목록을 보면 나눔고딕 Bold가 보이질 않습니다. 이 친구는 대체 어디에 숨어 있을까요?
나눔고딕 Bold는 따로 꺼어내 쓰는게 아니라 나눔고딕 보통을 "굵게"로 적용하면(티스토리 단축키 Ctrl+B) 알아서~ 적용되는 글꼴입니다. 따라서 나눔고딕 보통만 설치하고 Bold를 설치하지 않으면 위에 그림처럼 글자의 테두리가 매끄럽게 보이지 않습니다.
나눔고딕에 "굵게"를 적용하면 ? = 나눔고딕 Bold !
위에 그림은 나눔고딕 Bold와 나눔고딕 ExtraBold를 비교한 모습입니다. 순서대로... Regular / Regular+굵게(=Bold) / ExtraBold / ExtraBold+굵게 입니다.
ExtraBold는 "굵게" 옵션을 적용해도 굵어 지지 않습니다. 원래 굵기도 굵거니와 글꼴 자체에서 지원을 하지 않기 때문이죠.
자 다시 본론으로 돌아와서 나눔고딕 웹폰트를 블로그에 적용하고 CSS에서 Bold옵션을 주면 왜 글자가 깔끔해 보이지 알게 되셨을 겁니다.
그렇다면 방법은? 나눔고딕 Bold도 웹폰트로 만들어 사용하든지 아님 차라리 나눔고딕 ExtraBold를 사용하여 확실히 강조를 해주는 겁니다.
적용 방법은 역시 같습니다. 일단 아래 폰트를 블로그에 올리시고요....
포스트 잘읽었습니다~ 따라하기도 쉽네요.
궁금한게 있어서 질문올립니다~
포스트에디터상에서 엑스트라볼드체를 적용하는 방법은 없을까요?
css로 '메뉴에쓰이는글씨' '링크가적용된글씨' 같은 경우가아니라..
본문 중간에 굵게 하고싶은 부분이요~
기초가없어서 횡설수설했는데 이해하실런지...
잘배워서 쓰고있었는데요 ..
오늘 갑자기 nanumEB 폰트가 안먹네요?
잘보이던것도 갑자기 굴림인지 돋움인지로 보이고..;;
그냥 나눔고딕은 잘보이는데 나눔고딕EB만 갑작스래 안보여요 ㅠㅠ
IE8로 갈아탄뒤의 첫접속에 이런일이 ;;
일반 나눔고딕의 자리에 나눔고딕EB를 넣어보니
그냥 굴림으로 나오고 다시 나눔고딕으로 바꾸면 잘나오네요 ;;
갑자기 EB만 안되는 이유가 뭘까요? ;
어제 보고 따라해서 웬폰트를 지정했거든요-_ㅠ
티스토리를 처음 여는 터라 긴장해서 했긴 했는데요. 제대로 적용이 된 것 같구요.
근데 문제는 자꾸 티스토리 블로그에 접속만 하면 꺼져요-
제가 네이버 블로그도 하는데 그것도 꺼지구요. 아무래도 제 생각에는 네이버에서
다운 받은 나눔고딕체 떄문인것 같은데..잘 모르겠어요. 폰트가 나눔고딕으로 같거든요. 컴퓨터 설정도 아예 윈도우도 나눔고딕으로 써서 충돌해서 그런가 무족껀 네이버 블로그든 티스토리 키면 컴퓨터 꺼지고 파란 화면으로 넘어가서...다시 재부팅-_ㅠ 다른 사이트에서는 안그래요-_ㅠ 도대체 어찌된 영문일까요? 죄송합니다ㅠ
요즘 블로그에 네이버에서 배포하는 나눔고딕을 적용하는게 유행입니다. 블로그 방문자의 컴퓨터에 나눔고딕 폰트가 설치되어 있지 않더라도 정상적으로 폰트가 표시되도록 하려면 나눔고딕 웹폰트(eot파일)를 블로그에 적용해야 합니다.
10분 안에 간단(?)하면서도 확실하게 티스토리 블로그에 나눔고딕(또는 다른폰트) 웹폰트를 적용하는 방법을 알아 보도록 하겠습니다.
흠...10분이라? 내가 지금 2시간째
삽질 중인데 말이 되니~?
물론 되긴 됩니다. 단 몇 가지 조건들이 딱 맞으면...1분 만에도 가능합니다.
※ 나눔고딕 적용 방법
1. 다음의 나눔고딕 eot파일을 다운받아 스킨폴더에 업로드합니다.
흔히들 Microsoft Weft가 있어야만 eot파일을 만들 수 있는걸로 아는데 이게 없더라도 다양한 방법으로 웹폰트를 만들 수 있습니다. Weft로 만든 eot파일은 웹폰트를 만든 사람이 지정한 특정 도메인에서만 사용할 수 있기 때문에 활용성이 떨어집니다. eot 생성법은 뒤에 다시 설명하도록 하고요...일단! 제가 올려 놓은 파일은 도메인 제한이 없습니다.
어떤가요? 웹폰트가 제대로 보이나요? 폰트가 블로그 전체에 적용되지 않고 본문 글에서만 보인다면 추가적으로 CSS 코드를 수정해야 합니다.
이는 스킨마다 CSS 구조가 다르기 때문에 위의 몇 개의 코드만으로도 전체 페이지(제목, 본문, 카테고리, 태그...리플 등등)의 모든 글꼴이 나눔고딕으로 적용될 수도 있고 일부만 적용될 수도 있습니다. 따라서 모든 스킨에 통용되는 코드는 없습니다...
아래 스킨은 위 코드만으로 나눔고딕이 적용되는 스킨들입니다. 이 외에도 더 있지만 티스토리에서 기본으로 제공하는 스킨의 반 이상은 추가적인 CSS 수정을 필요로 합니다.
(순서대로 1단, 2단, 3단형 스킨)
4. 만약 위에 코드만으로 웹폰트가 적용되지 않았다면(그리고 모든 글자를 나눔고딕으로 보이도록 하고 싶다면!) CSS 내용 중 FONT: 와 FONT-FAMILY: 를 모두 찾아서 nanum을 폰트 리스트의 맨 앞에 추가해 줍니다. 물론 필요한 부분만 찾아서 적어줘도 되지만 CSS를 잘 모르신다면 그냥 모든 부분에 적어 주는 게 편할 겁니다.
여기서 유의할 점은... 아래 샘플코드에서 첫 번째는 폰트 이름만 있는 반면에 두 번째는 폰트크기가 맨 앞에 있습니다. 저 숫자 앞에 나눔고딕을 넣게 되면 스킨의 글자 크기가 달라지니 유의하세요. 맨 앞의 폰트이름 바로 앞을 새치기 하고 nanum 네 글자만 적어 주세요~.
FONT-FAMILY:nanum, Verdana, Tahoma, Arial;
FONT:0.8em nanum, tahoma;
참고로 현재 제가 사용하는 "Fluid" 스킨은 CSS 코드 중 총 12군데에 나눔고딕을 추가해 주었습니다.
잠깐! 그냥 심플하게 "나눔고딕"
이렇게 적으면 안 돼?
현재 컴퓨터에 나눔글꼴이 설치되어 있다면 실제 나눔고딕의 폰트 이름인 "나눔고딕"이나 "NanumGothic"을 적어주면 안됩니다.
왜냐하면 웹폰트가 먼저 보여지는게 아니라 컴퓨터에 설치된 폰트가 먼저 보여지기 때문이죠. 그래서 진짜 이름 "나눔고딕" 대신에 CSS에서 따로 정의하여 사용하는 폰트이름 nanum을 사용하는 것입니다.이것을 nanum이 아니라 아무개, 제시카, 셜리, 유리, 니콜...등등으로 정해도 전혀! 상관이 없습니다. (대신 한가지 이름으로 일관되게 사용해야 합니다. 양다리는 안되요...한 우물만 열심히~)
따라서 나눔고딕으로 웹폰트를 적용하기 전에! 나눔글꼴을 윈도우의 C:\Windows\Fonts 폴더에서 삭제한 후 시작하시길 바랍니다.
나눔고딕 웹폰트를 블로그에 적용한 후에 제대로 보이는지 검증을 하려면 파이어폭스로 블로그를 열어 보았을 때, 익스플로러에서 처럼 나눔고딕이 아닌 굴림이나 기타 폰트로 나오면 제대로 적용된겁니다. eot 웹폰트는 마이크로소프트의 독자적인 기술이라 익스플로러에서만 볼 수 있습니다. 물론 이는 컴퓨터에서 나눔글꼴을 삭제했을 때 가능합니다.
폰트를 깔았다 지웠다하기 귀찮은데
그냥하면 안될까?
나눔고딕이 컴퓨터에 깔려 있다면 분명 익스플로러와 파이어폭스 양쪽에서 나눔고딕이 적용된 블로그를 보게 될겁니다.
따라서 익스플로러에서는 웹폰트 또는 컴퓨터 폰트를 보여주고, 파이어폭스에서는 컴퓨터 폰트만 보여주는 상태가 됩니다. 이럴 경우에는 익스에서 어느 걸 보여 주는지 알 수 없기 때문에 본인 혼자서 웹폰트가 적용되었는지 안 되었는지 알 수 없습니다. 이럴 땐, VMware나 Virtual PC로 블로그를 열어 보거나 나눔고딕이 뭔지 모르는 친구를 꼬시는 수밖에 없습니다.
위에 내용을 이해 하셨다면~~ 정식대로 나눔고딕 웹폰트가 적용된 블로그는 내 컴퓨터에 나눔글꼴이 설치되어 있더라도 파이어폭스로 접속했을 때 굴림이나 돋움 폰트로 보여야 합니다. 파폭으로 접속해도 나눔고딕으로 보인다면 그 블로거는 CSS에 폰트 이름을 "나눔고딕"으로 적어 넣은게 분명합니다. 물론 이 상태가 문제가 되지는 않습니다.
블로그 주인이 본인 블로그를 접속할 때는 컴퓨터의 나눔고딕 폰트로, 방문자가 접속했을 때는 웹폰트로 보여지니까요...
아 그러시군요ㅠㅠ, 전 어쩌다 개인사진첩 사용으로 쓸 블로그를 찾다 블로그스팟
을 하고싶어져서요.. 그런데 너무 어렵ㅠㅠ..
그럼 나난오예님 말씀대로, eot파일을 외부링크에 올려놓고
@font-face {font-family:rocksalt; src:url()};
body{font-family:rocksalt; font-size: 12px;} 요 url 부분에 주소를 같다붙이면 되는건가요?!
흠 사이트를 찾긴했는데 (http://www.divshare.com/) 링크 적용해봤어도
안되네용.. 제가 너무 몰라서ㅠㅠ읔 다른 쪽 질문으로 해서 죄송해요ㅠㅠㅠ
일반적으로 Microsoft Weft를 이용해 ttf 폰트를 eot 웹폰트로 변환하곤 하는데 프로그램을 설치해야하고 변환하는 과정이 결고 만만치 않다. 무엇보다 이 프로그램으로 변환한 eot 웹폰트는 작업의 마지막 과정에서 입력한 특정 도메인 외에는 사용할 수 없다는 것이다. 내가 만든 웹폰트를 친구에게도 보내주려면 내 블로그 주소와 친구의 주소도 함께 적어줘야 한다.
프로그램 설치 없이 간단히 할 수는 없을까?
다음에 소개하는 프로그램은 설치도 필요 없고 한번의 변환 과정으로 ttf파일을 eot파일로 변환할 수 있다. 물론 특정 도메인에만 사용해야 하는 제한이 있거나 하지도 않다. 게다가 시간도 불과 1, 2초 밖에 걸리지 않는다!
◦ 생성된 eot 파일의 크기가 상당히 작다 : MS Weft와 비교 해봐도 크게 차이가 나지 않음 (나눔고딕.ttf 2.23 MB → 나눔고딕.eot 845 kb)
1. eot 파일로 변환하려는 ttl 폰트를 준비하세요. 2. 첨부한 EOTFAST.EXE 파일을 다운받은 후 ttl파일을 이 exe파일 위로 드래그&드랍 합니다. 말그대로 ttl파일을 이 EOTFAST.EXE 파일 위로 끌어다가 놓아 주기만 하면 eot파일로 변환 완료!
Jzzn
| 2010.06.13 01:08 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |우와 블로그 바탕화면이 너무 예쁘네요+_+
LeeJinSu
| 2010.06.13 02:23 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |나난오예님 덕분에 유용한 정보 알아가네요.
naburo
| 2010.06.15 15:38 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |올려주신 글 매우 유용한 정보입니다.
며칠이나 이것때문에 씨름했거든요! 감사합니다.
그런데 한가지 궁금한것이 있습니다.
폰트변환후 폰트이름을 css에 적어주는데 나눔고딕의 경우 nanum, 나눔extrbold는 nanumeb 로 하셨는데...
이 이름은 어디서 볼 수가 있나요?
만약에 제가 맑은 고딕을 변환했다면 css에 뭐라고 적어야 할까요?
naburo
| 2010.06.15 22:52 신고 | 댓글주소 | 수정 |예 이유는 읽었는데 ...
임의로 정의해준다는 데서 제가 이해를 못했나보네요~
덕분에 이제야 이해가 갔습니다.
감사~~ 합니다.
김D
| 2010.07.21 17:24 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |포스트 잘읽었습니다~ 따라하기도 쉽네요.
궁금한게 있어서 질문올립니다~
포스트에디터상에서 엑스트라볼드체를 적용하는 방법은 없을까요?
css로 '메뉴에쓰이는글씨' '링크가적용된글씨' 같은 경우가아니라..
본문 중간에 굵게 하고싶은 부분이요~
기초가없어서 횡설수설했는데 이해하실런지...
힘내랏
| 2010.08.18 13:13 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |잘배워서 쓰고있었는데요 ..
오늘 갑자기 nanumEB 폰트가 안먹네요?
잘보이던것도 갑자기 굴림인지 돋움인지로 보이고..;;
그냥 나눔고딕은 잘보이는데 나눔고딕EB만 갑작스래 안보여요 ㅠㅠ
IE8로 갈아탄뒤의 첫접속에 이런일이 ;;
일반 나눔고딕의 자리에 나눔고딕EB를 넣어보니
그냥 굴림으로 나오고 다시 나눔고딕으로 바꾸면 잘나오네요 ;;
갑자기 EB만 안되는 이유가 뭘까요? ;
힘내랏
| 2010.08.19 22:40 신고 | 댓글주소 | 수정 |컴에 설치된 나눔들을 삭제했구요
봤을때 보통 나눔고딕은 잘나오는데 역시나
EB는 표시가 안되네요.. IE8이라서 그런가요?
호환성체크후에 보면 EB까지 문제없이 잘나오는데
IE8일땐 보통 나눔고딕이네요 ..
한가지 더 여쭤보자면..
크롬으로 혹시나하고 확인해보니 나눔고딕이
아예 안나오네요 ..나난오예님 블로그도 그렇구요
혹시나싶어 다른분 블로그를 가니 나눔고딕이 나오네요;
아.. ㅠ.ㅠ 답답하네욤 ;;
장문의 댓글로 괴롭혀드려 죄송합니다 ;;
북원더러
| 2010.08.23 13:39 | 댓글주소 | 수정/삭제 | 댓글쓰기 |어제 보고 따라해서 웬폰트를 지정했거든요-_ㅠ
티스토리를 처음 여는 터라 긴장해서 했긴 했는데요. 제대로 적용이 된 것 같구요.
근데 문제는 자꾸 티스토리 블로그에 접속만 하면 꺼져요-
제가 네이버 블로그도 하는데 그것도 꺼지구요. 아무래도 제 생각에는 네이버에서
다운 받은 나눔고딕체 떄문인것 같은데..잘 모르겠어요. 폰트가 나눔고딕으로 같거든요. 컴퓨터 설정도 아예 윈도우도 나눔고딕으로 써서 충돌해서 그런가 무족껀 네이버 블로그든 티스토리 키면 컴퓨터 꺼지고 파란 화면으로 넘어가서...다시 재부팅-_ㅠ 다른 사이트에서는 안그래요-_ㅠ 도대체 어찌된 영문일까요? 죄송합니다ㅠ
싱커
| 2010.09.25 21:54 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |제껀.. 안되네요 ㅜ,ㅜ..
제목부분만 굵게 하고 싶은데.. ㅜ,ㅜ
싱커
| 2010.09.28 17:34 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |팁블로그에 초대해드리면 쫌 바꿔주시지 않으실래요?~ 제목부분만 굵게 나오면 퍼펙트 하겠는데요 ㅜ,ㅜ
가능하면.. 초대가능한 메일주소 알려주세요~^^;;; 바쁘시다면 무시해주시구요.. 전 괜찮습니다.
동강사랑💙
| 2010.12.07 15:21 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |올려주신 글 보고 티스토리에 나눔고딕을 적용할 수 있었습니다. 초보자 입장에서 쉽게 이해 가도록 자세한 설명에 감사드립니다.
edgar
| 2011.03.10 14:14 | 댓글주소 | 수정/삭제 | 댓글쓰기 |예전부터 궁금해했던 부분들이 속 시원하게 풀렸습니다 ^^
감사합니다!
BFInvestment
| 2011.03.23 11:17 신고 | 댓글주소 | 수정/삭제 | 댓글쓰기 |디자인이 너므 멋지네요 좋은 리뷰 잘보고 갑니다.
꼭 적용 하겠어요 ^^ ㅎ
태안
| 2011.08.11 11:12 | 댓글주소 | 수정/삭제 | 댓글쓰기 |웹폰트는 인터넷 상에서만 되나요?
내 컴퓨터상에 eot를 넣고 불러오는건 안되나봐요??