작성일자
카테고리 CSS/CSS2.1
웹디자인에서 폰트의 사용은 아주 중요합니다. 글을 읽을때의 가독성과 글자의 생김새로 인한 디자인에 많은 영향을 미치게 되기 때문이죠. 그래서 글을 작성할때 굴림체인지 돋움체인지를 선택을 하게 됩니다. 한글은 완성형의 폰트는 숫자가 많지만 가장 많이 쓰는 글자가 2350개이므로 대부분의 폰트는 이 숫자의 갯수로 만들게 됩니다. 그런데 웹상에 가독성이나 디자인 측면에서 좋은 폰트를 선택하기란 쉽지 않습니다. 왜냐하면 내 컴퓨터에 설치된 폰트가 방문자의 컴퓨터에도 설치되어 있다는 보장이 없기 때문이죠. 내 컴퓨터에 있는 폰트를 CSS 스타일시트에 포함시켜서 굴림체로 글을 작성하더라도 글을 저장하고 나면 설정된 폰트로 보이게 되는데 방문자의 컴퓨터에 설정된 폰트가 없다면 CSS에서 설정한 대로 모든 컴퓨터에 기본적으로 설치된 굴림체와 돋움체로만 보이게 됩니다. 

그렇다면 내가 열심히 디자인한 블로그의 웹페이지가 다른 사람에게는 다르게 보인다는 것인데 하나마나한 디자인을 하게 된 것입니다. 요즘은 좋은 폰트들이 무료로 공개되어서 다음체나 나눔체 등 웹폰트로 사용할 수 있는 것이 있습니다. 하지만 이것도 방문자의 컴에 설치되어있어야 가능합니다.

웹폰트는 방문자의 컴퓨터에 폰트가 설치되지 않았어도 웹폰트 사이트에 링크를 걸어놓고 CSS로 인식을 시켜주면 어느 컴퓨터에서나 내가 선택한 폰트로 보이게 되는 아주 훌륭한 역할을 합니다. 또한 그것이 개인적인 웹사이트인 블로그에서는 무료로 사용할 수 있다면 누구든 사용하고 싶어질 것입니다. 

이번 글에서는 개인용 블로그에서 무료로 사용할 수 있는 모빌리스의 웹폰트 사용법을 알아봅니다. 영문은 구글 웹폰트를 사용하면 아주 많은 유료폰트를 웹폰트로 무료로 사용이 가능합니다. 

우선 HTML이나 CSS에 대해서 전혀 모르시는 분들도 가능하도록 이 두가지에 대해 간단한 설명을 드립니다. 블로그에서 글을 작성하면 워드나 한글에서 문서작성하듯이 글자를 치고 엔터를 치고 스페이스바 누르고 하는 작업이 이루어지지만 티스토리의 경우 우측상단에 있는 HTML글자 옆의 체크박스에 체크하면 HTML코드로 보여지게 됩니다. 웹은 단순한 워드프로세서와는 다르게 어떤 형식을 갖춰야 하는 규칙이 있습니다. 이 규칙을 지키지 않으면 웹에서는 단순한 글자로만 보이게 됩니다. 편하게 글자를 쳐도 블로그 프로그램이 자동으로 HTML코드를 만들어서 CSS까지 웹에 올려주는 것입니다.

HTML은 이러한 단순한 글자를 웹에서 볼 수 있도록 태그라는 것을 사용합니다. 제목에는 h1부터 h6까지의 태그를 사용하고 문장은 <p>라는 태그를 사용해야 제대로 보여집니다. 이런 태그를 사용하지 않아도 보여지지만 글자의 크기나 복잡한 웹페이지 작성을 못하게 됩니다.

예전에는 CSS라는 것이 있었어도 잘 사용하지 않았는데 지금은 웹표준이 강조되기에 필수요소가 되었는데 아직 한국에서는 그 바람이 세지는 않지만 어느정도 CSS가 자리잡아가고 있습니다. 이런 상황인데도 CSS3가 HTML5와 함께 두각을 나타내고 있습니다.

CSS란 HTML코드에 의해 만들어진 글이나 이미지를 모양좋게 배치하는 배치도구입니다. 이것도 HTML과 마찬가지로 이미 스킨파일에서 정해진대로 블로그에 나타나도록 되어있습니다. 티스토리가 다른 블로그와 다른 점은 이 CSS를 조정해서 디자인을 마음대로 바꿀 수 있다는 것입니다. 

이제 본론으로 들어가서 웹폰트를 사용하기 위해서 가장먼저해야할 것이 모빌리스 웹사이트를 방문해서 폰트의 링크를 따오는 것입니다.

링크


위 링크를 클릭해서 모빌리스 사이트의 웹폰트 페이지에 보면 아래와 같은 폰트 리스트가 있습니다.


각 폰트의 탭을 선택하면 여러종류의 폰트를 볼 수 있습니다. 여기서는 나눔고딕을 사용해보겠습니다. 1을 클릭하면 코드를 복사할 수 있는 페이지로 이동합니다.


하나의 폰트를 사용하려면 1에서 클릭드래그하여 2까지 온 다음 Ctrl+C키를 눌러 복사합니다. 


블로그의 코드를 수정하려면 항상 먼저해야할 것이 현재상태의 스킨 저장입니다. 관리자(Admin)페이지에서 스킨을 선택하고 2의 아이콘을 클릭하면 현재사용중인 스킨이 나옵니다. 스킨저장버튼을 클릭하면 작은 창이 나옵니다. 적당한 이름을 넣거나 오늘날짜를 입력하고 엔터치면 저장됩니다. 나중에 잘못되었을 때 다시 이곳에 와서 5의 보관함탭을 선택하면 저장된 스킨이 있고 적용버튼을 클릭하면 바로 적용됩니다.


모빌리스에서 복사한 것이 아직 클립보드에 저장되어있으므로 스킨페이지로 이동합니다. 1의 HTML/CSS메뉴를 선택하면 코드를 수정할 수 있는 창이 나옵니다. 복사해온 코드는 <head>태그 안에 붙여넣기를 합니다. 코드를 보면 <head>만 보이는데 아래로 내려가면 </head>도 나타납니다. HTML 태그는 이처럼 두개를 한쌍으로 되어있고 그 사이에 코드가 들어갑니다. 위치도 중요한데 다른곳에서 폰트 소스를 불러오는 경우 내 스타일시트인 3의 style.css도 폰트 소스를 인식해야하므로  이 링크소스 이전에 선언되어야합니다. 파란색의 블럭설정한 것이 모빌리스의 폰트 소스이고 그 아래 두번째 줄이 내 스타일시트를 웹페이지에 불러오는 링크입니다. 그러니 아무곳에 삽입하면 안됩니다. 제 경우는 세개의 폰트를 링크했습니다. 하나만 복사해오고 그 아래 다시 붙여넣고 2의 폰트이름만 고치면 됩니다. 이렇게 하면 내 블로그와 모빌리스 폰트저장 서버와 연결이 완료됩니다.

연결은 되었는데 정작 웹페이지에 폰트를 사용하려면 스타일시트에서 지정해 줘야합니다. 이부분이 좀 복잡한데, 왜냐하면 어떤 부분에 어떤 폰트를 사용하겠다고 선언한 곳이 스킨에 따라 다르고 아주 여러곳에 있기 때문입니다.

 
제 스킨에서 돋움체가 얼마나 사용되고 있는지 알아보기 위해서 Ctrl+F키를 누르면 단어 검색창이 나옵니다. 여기에 dotum이라고 입력하니 18개가 나옵니다. 코드 수정을 한번도 안해본 분이라면 하나라도 수정하는데 아주 주의를 해야하는데 18개면 아주 어려워집니다. 그래서 한꺼번에 고칠 수 있는 방법은 코드 에디터를 사용합니다. 윈도우즈에 기본으로 깔려있는 메모장으로도 가능하지만 전문적인 무료 에디터를 사용하는 것도 좋습니다.  노트패드 플러스플러스로 제경우에는 메모장 대신에 사용합니다. 다운받아 설치하면 한글로 설치됩니다. 

우선 스타일시트 창에 클릭한 다음 Ctrl+A키를 누르면 코드 전체가 선택됩니다. Ctrl+C를 누르면 복사가 됩니다.


메모장을 열고 빈곳에 클릭하여 Ctrl+V키를 누르면 복사됩니다. 2의 스크롤바를 올려서 상단에 놓고 상단의 줄에 클릭합니다. 다른 편집기는 알아서 위에서부터 검색하는데 이 메모장은 복사해서 붙여넣기하고 나면 커서가 마지막줄의 맨 끝에 위치하므로 꺼꾸로 검색해야하는 단점이 있습니다.


Ctrl+F키(노트패드 플러스도 같은 단축키)를 누르면 찾기창이 나옵니다. 검색어를 입력하고 아래로를 선택해서 다음찾기 버튼을 클릭하면 블럭설정된 폰트이름이 나옵니다. 취소버튼을 클릭하여 닫습니다.


다음에는 Ctrl+H키를 누르면 바꾸기 창이 나옵니다. dotum은 블럭설정이 되어있으니 자동입력되어 있습니다. 바꿀내용에 위와같이 나눔고딕웹과 돋움폰트 이름을 같이 입력합니다. 바꾸는게 아니고 나눔고딕을 추가하는 것입니다. 모빌리스 서버가 연결이 안되면 돋움이라도 써야하거든요. 두개의 폰트 사이에 콤마는 반드시 넣어야 합니다. 모두 바꾸기를 클릭하면 전체가 교체됩니다. 노트패드플러스는 몇개가 바뀌었는지 메시지도 나와서 편리합니다.


제경우에 이미 있는 폰트이름에 추가했으니 두개의 폰트이름이 나옵니다.


이제 블로그로 이동복사하기 위해 Ctrl+A키를 눌러 전체를 선택한 다음 Ctrl+C키를 눌러 복사합니다.


블로그 스타일시트 창에오면 블럭설정이 되어있다면 그대로 Ctrl+V키를 누르면 되지만 안되어 있다면 Ctrl+A키를 눌러 다시 전체를 블럭설정한 다음 Ctrl+V키를 눌러야 기존 코드와 전체가 교체됩니다. 이제 저장버튼을 누른 다음 블로그 페이지로 가서 폰트가 바뀌었는지 확인합니다.

저작자 표시 비영리 변경 금지
신고
BlogIcon 겨울뵤올

이 글을 읽으니, 지금 제 블로그에세 사용중인 나눔고딕이 웹이 아닌 것 같네요. 웹 나눔고딕이라고 해서 적용해 놓았는데.. 아님, 웹 나눔고딕 설정도 방법이 여러개인건지..
지금은 폰이라 스샷들이 잘 보이지 않으니 낼쯤 컴으루 제대로 봐야게써요.

그리고, Html에서 바꾸기가 안돼서 수동작업을 했었는데 이런 방법이 있는 줄 생각도 못했네요. 메모장에 옮기는 건 좀만 깊게 생각함 깨달을 수 있었을 텐데..
난 참 둔하단 생각이..ㅋ
좋은 정보 얻고 갑니당! ^___^

BlogIcon 베누시안

겨울뵤올님의 웹페이지를 보니 기본으로는 나눔체로 설정을 했지만 그것은 접속자의 컴에도 나눔체가 있어야 나눔체로 보이게 됩니다. 그래서 그 폰트가 없는 경우 다음 단계인 맑은고딕이나 굴림체로 보이게 됩니다. 그러니 나만 혼자 나눔고딕으로 보이게 되서 나홀로 디자인이 되는거죠. 그래서 웹폰트가 필요하답니다. 위 글을 보시고 천천히 따라해보세요. html에서 웹폰트링크를 걸어주고 CSS에서 폰트패밀리로 NanumGothicWeb 으로 폰트명을 정확히 해줘야 합니다.

BlogIcon 겨울뵤올

네, 아무래도 제가 설정한 건 웹고딕이 아니었나봐요.ㅜㅡ
분명 웹고딕이라구 해서 설정한곤데..ㅜㅡ
님 글 보구 새로이 설정해봐야겠어요.

BlogIcon 베누시안

네 그러세요. 꼭 성공하시길 바랍니다.~

BlogIcon 겨울뵤올

베누시안님 글 대로 따라하니, 나눔고딕체 글씨도 그대로 적용이 되면서 사이드바도 왼쪽 정렬이 되었어요. 그전에는 브라우저에 따라 사이드바가 오른쪽 정렬로 보이는 현상이 있었거든요. 나눔고딕체 소스를 적용하면서 그랬다는..__+ 나눔고딕을 고수하려면 어쩔 수 없었기에, 찝찝하지만 그대로 두었는데, 지금은 문제가 말끔히 해결되었습니다. ^^;
좋은 정보 감사합니다..^^*

BlogIcon 베누시안

성공하셨다니 다행입니다. 그런데 본문은 그대로 굴림체로 보이네요. 전체를 바꾸지 않으셨나보네요.

BlogIcon 베누시안

자신의 블로그는 나눔체로 보이겠지만 다른 사람이 보이는 글자는 굴림체로 보이게 됩니다. 지금 살펴보니 인라인 방식으로 스타일이 설정되어있네요. 고치려면 한곳만 수정하면 됩니다.
html 설정페이지로 들어가서 Ctrl+F키를 눌러 다음 검색어를 넣고 검색하면 바로 하이라이트 표시되어 나옵니다.

div class="article" style="font:10pt/150% nanum;"

그러면 뒤에 있는 style="font:10pt/150% nanum;"만 삭제를 하고 <div class="article">만 남도록 하면 됩니다. 그리고 저장하고 나오세요.

BlogIcon 베누시안

그러고나면 글자 크기가 작아질겁니다. 조금 크게하려면 폰트 크기를 바꿔줘야합니다. html 수정페이지에서 같은 방법으로 Ctrl+F키를 눌러서 .article을 검색어로 넣어서 검색하면 CSS.style 창에서 다음과 같은 부분이 나올겁니다.
.article {
margin-bottom: 1.5em;
width: 100%;
overflow: hidden;
text-align: justify;
letter-spacing: 0px;
font: 1em/1.8em NanumGothicWeb, "맑은 고딕", Gulim, 굴림, Tahoma, AppleGothic, Sans-serif;
}

font: 1em/1.8em 에서 1em을 1.2em으로 바꿔주면 커질겁니다.

BlogIcon 겨울뵤올

우왓~!!
자세한 설명 감사드립니다..ㅜㅜ(감동이얍...ㅜㅜ)
방금 설명해 주신대로 적용시켜 보았는데, 저는 제대로 된 건지 알 수가 없네요.. __a
수고스럽지만, 한번 더 들려서 봐주시겠어욥?? ^__^a

BlogIcon 베누시안

div class="article" style="font:10pt/150% nanum;"

아직 위에서 뒷부분이 안지워졌네요.

BlogIcon 베누시안

이제 폰트는 나눔체로 바뀌었고 글자 크기도 바꿨지만 좀 작네요. 이전의 굴림체 크기로 바꾸려면 좀더 크게 해야겠습니다. 1.2로 한 것을 1.5로 바꿔보세요.

BlogIcon 겨울뵤올

하나만 지우고, 다른 한 개는 미처 못지웠었네요..^^;;;
한번만 더 봐주세요~~~^^;

BlogIcon 베누시안

위에 댓글 보고 다시한번 해보세요.

BlogIcon 겨울뵤올

크기는 1.2가 적당한 것 같아요. 제가 포스팅한 것들 대부분이 직접 글씨크기를 설정해준터라 작게 보이나봐요. 글씨크기를 설정해주지 않은 글들은 1.5로 바꾸니 너무 크고, 1.2로 하면 적당하게 보이는 것 같아요. 베누시안님 덕분에 많은 걸 배웠습니다. ^___^
진심으로 감사드려여~~~★.★

BlogIcon 베누시안

제가 큰화면으로 보다보니 그런가보네요. 나중에라도 고치려면 어떻게 하는지 아셨으니 잊지 않으시겠죠?^^

BlogIcon 겨울뵤올

아, 넵~!! 당근이져~^^
아, 그리고 제가 아는 블로거분이 질문을 해오셨는데,
제가 잘 몰라서 베누시안님 소개시켜드렸어요.. ^^;;;;;
다음에서 티스토리로 이사오신 분이신데, 앞으로 님하고 친하게 지냄 좋을거라고도 했어요..^^;;;;;
베누시안님 귀찮게 해드리는 건 아닌지...^^;;;;;

BlogIcon 베누시안

ㅎㅎ.. 손님까지 끌어오시고.. 저는 손님은 무조건 대환영입니다. 제가 아는 범위에서 새글을 올려서라도 해결해드립니다. 모르면 배워서 올려드리죠.ㅋ 그리고 오른쪽에 공지사항에 보면 초대장이 많거든요. 티스토리 블로그 개설하실분 있으면 초대장 빌려드릴테니 마음껏 쓰세요. 누구누구 이메일에 보내주세요 하면 바로 보내드리겠습니다.

송사리

안녕하세요! 워드프레스 검색하다 들르게 된 곳인데 이것저것 도움되는 글이 너무 많아 감사해서 댓글남겨요! 반십년도 더 전에 드림위버로 개인 홈페이지 만든 경험밖에 없어서 마음에 드는 공간을 어찌만들까 이리저리 찾아보다 워드프레스 설치했는데, 그러고서도 좀체 손대기가 힘들어 진도가 안나가고 있었거든요ㅜ.ㅜ 아는 바가 없어 적용시키는데 시간은 걸리지만 정말 많은 공부가 돼요! 포토샵 관련 게시글도 많아 너무 기뻐요! 종종 들러 많이 배우겠습니다. 다시한번 감사해요!

BlogIcon 베누시안

안녕하세요. 반갑습니다. 워드프레스가 요즘 인기가 있죠. 워드프레스를 잘 꾸밀려면 우선 티스토리에서 스킨 디자인을 해보시는 것이 좋습니다. 티스토리가 훨씬 쉽거든요. 방명록에 비밀댓글로 이메일 적어주시면 초대장 보내드립니다.

BlogIcon Phanie

베누시안님 정말 사랑합니다.
진짜 사랑합니다. 완전 사랑합니다.
감정을 주체할 수가 없네요.
이걸 어떻게 표현해야할지 모르겠습니다.
마치... 아... 아 진짜... 아... 정말...
정말 사랑합니다.

BlogIcon 베누시안

안녕하세요. 반갑습니다. 저도 파니님을 사랑합니다. 좋게 봐주셔서 감사합니다.~~

BlogIcon 밤비deje

베누시안님, 지금 블로그에서 사용하시는 글씨 기본크기도 시원시원하게 크고,

색깔도 다른 블로그보다 훨씬 진하여 제 눈이 굉장히 좋아해요^^
(제 생각엔 이 글씨체가 11싸이즈는 되는 것 같네요. 이 크기 기본 설정도 css를 만지면 고쳐지는 게
맞겠죠? ^^)


제 블로그 서체도 이 포스팅대로 하면 글씨체가 크고 진하게 바뀔 수 있을까요?

메뉴 작업 잘못해서 지금도 망가진 상태로 있는데, 이번에도 잘 안될까봐 ㅎㄷㄷ 무서워요;;;

BlogIcon 베누시안

안녕하세요. 반갑습니다. 좋게 봐주셔서 감사합니다. 차근차근 하시면 될겁니다. 꼭 성곡하세요.

BlogIcon 밤비deje

베누시안님,

이 교체작업은 스킨이 무엇인지에 따라서 적용이 되지 않을수도 있는 걸까요?

포스팅대로 따라해 보았는데 제 블로그는 폰트 교체가 잘 안 되네요...

현재 댓글들만 서체가 바뀌었고, 글꼴도 제가 원하는 나눔고딕도 아니게 되었어요.

무엇이 문제일까요...

BlogIcon 베누시안

안녕하세요. 폰트 수정은 어떤 스킨도 가능합니다. 일부만 수정이 되었다면 다른 부분이 수정이 안됐다는 것인데요. 메모장으로 검색을 해서 font: 다음에 처음 나오는 폰트이름이 나눔고딕으로 나와야합니다.

BlogIcon 其仁

오, 제가 찾던 정보네요. 감사합니다. 잘 사용하겠습니다.

BlogIcon knmidal

와우 드디어 저도 적용되었습니다. 자세한 설명 덕분에 ..^ ^ 기분 좋습니다.
이제 다른 것을 또 배울것을 찾아봐야 겠어요~ 감사합니다.

BlogIcon 베누시안

안녕하세요. 성공하셨다니 다행입니다. 댓글 감사합니다.

티스토리 툴바