티스토리블로그 글씨체 변경하는방법(나눔고딕폰트)
오늘은 블로그에 글씨체를 변경해서 블로그의 가용성을 높이는 방법을 알려드릴게요.
먼저, 가용성이 무엇이냐?
백과사전의 의미로는 서버, 네트워크, 프로그램 등의 정보적인 시스템이 정상적으로
사용가능한 정도를 말하며 보통 "가동률" 이라고 말을 합니다.
블로그에서 가용성의 의미란 무엇이냐?
한마디로 말해 누군가 내 블로그로 들어왔을때 나의 블로그에 얼마나 오랜시간을
머무느냐...라고 하겠습니다.
내 블로그에 다른 사람들이 머무는 시간이 왜 중요하냐?
블로그로 수익을 창출할 때 여러이유도 많겠지만, 방문자들이 머무는 시간에 따라서
내 블로그의 수익도 일정부분 비례합니다. 그렇기에 오래 머문다는 것은 내 블로그의 광고노출시간도 길어진다는 점에서 애드센스수익과도 관련이 있습니다.
가용성이란 폰트랑 무슨상관이라고 개소리냐? "보기도 좋은떡이 더 맛있다" 라는 속담이 있습니다. 보기좋은 글씨일수록 방문자들이 나의 포스팅을 읽기가
더 편해져서 자연스레 머물 수 있습니다.
먼저 이해하기 쉽게 아래의 예를 보도록 하겠습니다.
기본폰트 '궁서체' 를 적용한 예
무료폰트 '나눔고딕' 을 적용한 예
여러분들은 위 사진들을 봤을때 어떤 글씨체가 더 보기 편하신가요? 저는 나눔고딕을 적용한 글씨가 더 보기 편합니다. 뭐 취향에 따라 다르겠지만 본인이
생각했을때 보기 편하다라는 느낌을 받는 글씨체를 적용하는게 제일 Best 겠죠?
오늘은 무료폰트로써 네이버(Naver)에서 제공하는 나눔고딕글씨체를 적용할 거구요, 글씨체고정 및 글씨크기 고정도 함께 배워보겠습니다.
그리고 나중에는 무료폰트 및 무료폰트를 제공하는 사이트들에 대해서 포스팅을 해드리도록 하겠습니다.
블로그에 글씨체를 적용하는 3가지 방법
1. HTML/CSS 편집에서 font-family 수정
2. 블로그에 폰트파일 업로드 후 적용
3. 구글 웹폰트에서 적용
각각의 장단점이 있는데 1번의 경우는 내 블로그를 방문한 사용자의 컴퓨터에 오늘 적용할 나눔고딕 글꼴이 없다면 적용이되지 않아 기본글꼴로 보이게 됩니다.
윈도우 7 이하 운영체제에서는 폰트를 다운받지 않는 이상은, 기본적으로 내장이 되있지 않습니다. 저도 XP쓰는데 없었음 ㅠㅠ ;;;
2번의 경우는 내 블로그에 직접적으로 폰트를 설치하는 것이기 때문에, 방문자의 컴퓨터에 글꼴이 설치되지 않아도 나눔고딕글씨체로 볼 수가 있지만,
익스플로러(Internet Explorer)만 해당됩니다. 크롬, 사파리 등등 기타 브라우저에서는 똑같이 기본글꼴로 보입니다. ㅠ.ㅠ
3번의 경우는 구글에서 웹페이지상에 올려놓은 나눔고딕font 를 쓰기때문에 pc에 글꼴이 없어도 인터넷 브라우저가 달라도 항상 나눔고딕으로 화면에서
보여집니다만, 페이지마다 폰트를 항상 로딩하여 적용하기 때문에 약간의 느린면이 있으나 저는 별로 느린지도 잘 모르겠을정도로 미미한 정도?
아무튼 각각의 장단점이 있으니 본인이 원하는 방식으로 적용하시면 되겠습니다.
우선 블로그에 HTML/CSS 편집에서 font-family 수정하는 방법을 설명드리겠습니다. 블로그관리화면으로 들어가서 HTML/CSS 편집으로 들어갑니다.
여기서 HTML로 들어가면 되는데 보통 skin.html 로 되있을겁니다. 블로그 스킨마다 조금씩 차이가 있습니다. 여기서 Ctrl + F 를 눌러서 검색창에
font-family 라고 입력하시면됩니다.
그런데 제 HTML 에는 font-family 가 없습니다. 블로그의 Skin 마다 HTML이 다 다릅니다. 보통 font-family 를 검색하시면
"font-family : 돋움, 맑은고딕, 궁서체~~~~ 이런식으로 나타나게 되는데요,
여기서 "font-family : 나눔고딕, 돋움, 궁서체 처럼 맨앞에 나눔고딕을 먼저 적어주시면 됩니다.
저 소스를 해석하자면 모든글씨체에 "나눔고딕"을 먼저 적용하고 방문자의 컴퓨터에 나눔고딕글씨체가 없으면 돋움, 돋움도 없으면 궁서체를 적용하는
순서라고 보시면됩니다.
font-family 부분을 모두 찾아서 적용해주셔야 합니다. 모든부분에 적용하지 않으면 해당 font-family 부분만 나눔고딕으로 적용됨.
HTML을 다 편집하셨으면 CSS편집에서도 똑같이 해주시면 됩니다.
다음은 폰트파일을 직접 업로드 후 적용하는 방법에 대해서 설명드리겠습니다.
우선 나눔고딕 글씨체를 다운로드 해주세요.
NanumGothic.eot블로그 관리화면에서 HTML/CSS 편집으로 들어와 파일업로드를 누르고 하단에 있는 + 추가를 눌러 다운받은 NanumGothic.eot 파일을 추가하신 다음
저장을 눌러주세요.
자 이제 CSS 로 들어와주세요. 보통 style.css 라고 되어 있을겁니다. 들어오셨으면 맨 윗부분에 아래사진과 같이 맨 위에 폰트소스를 첨부해주세요.
폰트소스는 아래에 파일첨부로 적어두었으니 다운받아서 복사 후 붙여넣기하시면 됩니다.
폰트소스 파일첨부.txt@font-face {font-family:Nanum Gothic; src:url(images/Nanum Gothic.eot)};
body{font-family:나눔고딕; font-size: 13px;}
div{font-family:나눔고딕; font-size: 13px;}
font-size는 13px 로 되있는데 본인이 원하는 글씨크기를 수정해주시면 됩니다. 근데 13px 정도가 딱 보기 좋을겁니다.
블로그 전체에 수정한 폰트가 혹시 적용이 되시나요? 적용되면 패쓰~
제가 예전에 할때는 적용이 되지 않았습니다. 왜냐면 저는 구글크롬으로 인터넷을 사용하고 있었습니다.
위에서 말했듯이 인터넷 익스플로러에서만 적용이됩니다. 그런분들은 1의방법(HTML/CSS 편집에서 font-family 수정)으로 font-family를 수정해 주시면됩니다.
하지만 저는 블로그스킨이 이상한지 font-family도 없고, 인터넷익스플로러를 쓰는것도 아니라서 위 두가지 방법이 먹히지 않아 3번을 적용해보기로 했습니다.
혹시나 익스플로러사용자인데 2번째 방법으로 했지만, 글씨체가 바뀌지 않았다? 라고 하시는 분들은 위에서 설명한 모든 font-family 부분에 나눔고딕을
적어주세요. font-family 부분을 수정하지 않고 맨위에 붙여넣기만 한다고 하면 새롭게 작성되는 글들은 글씨체가 적용이되지만,
기존에있던 글들은 글씨체가 적용이 안됩니다. 그리고 글 작성할때, 글씨체나 글씨크기가 돋움이나 궁서체나 기타등등, 글씨크기가 10px, 9px, 기타 등으로
맞춰져 있어도 건드리지 마시고 그냥 글 작성 후 저장하시면 위에 적용했던 나눔고딕 13px로 보여질겁니다. 미리보기 하시면 됨!
[아휴 힘들다 ㅠㅠ]
자, 이제 마지막! 구글 웹폰트에서 font를 적용해 보기로 하겠습니다. 우선 구글웹폰트 사이트로 들어가봅시다.
<구글웹폰트> https://www.google.com/fonts/earlyaccess
1. Ctrl + F 를 눌러 Nanum Gothic 을 검색한다. (미안! 복사안돼! ↑첨부파일로 다 올렸어)
2. Link 아래에있는 주소를 복사 후 내 블로그 CSS 편집으로 GO! GO!
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
→여기야←
body{
이렇게 body 위에 붙여주면 됩니다.
그리고 위에서 설명했듯 모든 font-family를 찾아 뒷부분에 Nanum Gothic을(나눔고딕 한글로 하면 안됨) 제일 먼저 입력해주시면 됩니다.
이 부분을 하지 않으시면 기존에 있던 글들은 수정이 안되고 새롭게 작성되는 글부터 적용이 되오니 참고하시기 바랍니다.
아하! 그리고 블로그메인화면에 나오는 글씨체는 티에디션으로 새롭게 설정해주시면(그냥 새로고침같은 개념!!) 적용된 글씨체로 다시 바뀔겁니다.
후...드디어 끝났다...포스팅 단순하게 쓰면 되는데, 저는 그러질 못하고 너무 완벽하게 쓰네요. 후훗...
아차차...그리고 추가로 설명해드릴게 남았네요. 블로그 글자크기와 폰트고정을 간단하게 할 수 있는 방법이 있어요.
.article 부분에 important 라는 고정태그를 넣어주는 방법입니다.
우선 CSS 편집으로 들어가서 Ctrl + F 로 .article { 를 찾습니다. 본문 글자크기 고정(font-size 는 원하는데로 수정하세요)
.article * { font-size: 13px !important; }
본문 글자크기 및 폰트고정(font-family 부분에 원하는 폰트적어주세요. 임의로 고딕넣음)
.article * { font-family:고딕; font-size: 16px !important; }
위 태그는 본문만 변경됩니다. 응용한다면 본문은 .article * 태그로 나눔고딕으로 적용하고, 제목은 헤드라인 이나 기타 다른글씨체로 적용해도 되고요. ㅎ
수고하셨습니다. 이제 끝입니다. 가시기 전에 공감한번씩 눌러주세요.
▶ 추천포스팅 : 글목록이 아니라 썸네일(사진)배경을 블로그에 적용하는 방법
▶ 추천포스팅 : 애드센스수익을 높이는 사이드바 구글맞춤검색창 설치하기
▶ 추천포스팅 : 네이버가 밝힌 블로그괴담 10가지소문
▶ 추천포스팅 : 블로그로 돈벌고 싶다면 먼저 seo최적화방법을 알아둬라
