본문 바로가기
Blog Tip/Design

블로그에 웹폰트 적용하기 / 폰트 변경하기

by 카쿠覺 2013. 1. 11.

블로그에 웹폰트 적용하기 / 폰트 변경하기 타이틀 이미지입니다.

 

대부분의 블로그에서는 폰트를 변경하지 않은 채 기본폰트만을 이용하거나 내지는 블로그 에디터에서 기본적으로 제공해주는 폰트를 사용하고는 합니다. 네이버 블로그의 경우에는 다양한 웹폰트를 제공하고 있으니 그나마 선택의 폭이 다양하지만 티스토리의 경우에는 한글폰트로 지원해주는 것은 네 가지의 기본폰트밖에 없습니다. 그마저도 거의 사용하지 않는 것들을 제외하면 돋움과 굴림체로 두 가지 밖에 되지 않습니다.

 

그러나 요즈음에 블로그를 둘러보면 여럿 블로그들이 맑은 고딕이나 나눔 고딕으로 포스트를 작성하고 있음을 확인할 수 있습니다. 맑은 고딕이야 상당수의 유저들이 윈도우 XP 이상의 운영체제를 사용하고 있기에 굳이 사용자에게 설치를 권유하지 않더라도 다수의 방문객의 화면에서 비슷한 화면을 출력시켜줄 수 있지만 이를 사용하지 않는 다른 운영체제를 이용하는 경우에는 사용이 힘들다는 단점이 있습니다. 그렇다고 나눔 고딕으로 작성하자니 설치되어 있지 않는 분들이 대부분입니다.

 

이런경우에는 굳이 설치하지 않더라도 화면에서는 해당 폰트로 출력될 수 있게끔 하는 방법들이 몇가지 있습니다. 웹에서만 적용되는 하나의 폰트를 만들어서 페이지에 로딩시키는 방법입니다. 일반적으로 이런 폰트들을 '웹폰트'라고 부릅니다. 오늘은 티스토리 블로그에 한하여 페이지에 웹폰트를 적용시키는 방법에 대해서 알아보도록 하겠습니다.

 

미리 알고 가기 - CSS의 FONT 속성

 

웹폰트를 블로그에 적용하기 위해 알고가야 할 폰트 속성에는 font-family와 font-face가 있습니다.

 

* @font-family

 

글꼴을 지정할 수 있는 속성입니다. 가령 에디터에서 글 폰트를 변경한 후 HTML편집모드로 이동하셔서 확인해보시면 '<SPAN style="FONT-FAMILY: Batang,바탕">'이라는 모습으로 변경되어 있음을 확인하실 수 있습니다. 블로그에 웹폰트를 적용하고자 할때에는 블로그 내에 있는 모든 글의 폰트를 변경하고자 하기 위함이기에 몇 몇 부분의 폰트를 변경하는 것은 의미가 없습니다. 이 경우에는 티스토리 관리자 페이지에 있는 HTML/CSS 편집으로 들어가신 후 스타일 시트 편집 부분에서

 

'body{font-family: NanumGothicWeb, NanumGothic, "나눔 고딕", ...}'

 

와 같이 나타난 부분에서 사용하고자 하는 폰트를 입력해주시면 됩니다. (body 뒤에 붙은 폰트 속성이므로, body내에 위치하는 특별하게 설정되지 않은 모든 글에 대하여 지정한 폰트로 출력시킵니다) 가장 앞에 위치한 폰트가 우선으로 출력되며, 해당 폰트가 방문객의 컴퓨터에 설치되어 있지 않은 경우에는 차선의 폰트로 블로그 화면을 보여주게 됩니다.

 

요악하자면, font-family는 해당 부분에 어떤 폰트를 사용할 것인지를 지정해주는 속성입니다.

 

* @font-face

 

서버에 업로드 되어 있는 폰트가 어떤 폰트인지 지정해주는 속성입니다. ttf 형태의 폰트를 직접 불러오는 방식도 있으나 이 경우에는 폰트 파일 자체의 용량이 다소 크게되어 모바일 환경에서 보기 어렵다는 단점이 있습니다. 때문에 웹폰트 전용 형식인 .eot나 .woff 형태의 폰트를 사용하면 되나 eot의 경우는 인터넷 익스플로러에서만 지원하고, woff의 경우에는 IE9이상의 웹브라우저(크롬이나 파이어폭스도 포함)에서 지원하게 되나 그 미만의 버전에서는 지원하지 않습니다. 때문에 동시에 두 가지 폰트를 불러와야 합니다. 그러나 IE9 미만의 브라우저에서는 굳이 woff형태의 폰트를 가져올 필요가 없기때문에 다음과 같은 형태를 사용하게 됩니다.

 

@font-face {
font-family: "폰트 이름";
src: url(.eot확장자를 가진 폰트 URL);
src: local("컴퓨터 상에서의 글꼴 이름"), url(.woff확장자를 가진 폰트 URL) format("woff");
}

 

단 하나의 폰트 형태만을 지정하고자 할때에는

 

@font-face { font-family:이름; src:url(.주소); }

 

와 같이 스타일시트에 추가해주시면 됩니다.

 

font-face는 새로이 사용하게 될 폰트가 어떤 폰트인지 지정해주는 속성입니다.

 

해당 폰트를 직접 업로드 하여 사용하기

 

1. 사용하실 폰트를 미리 다운받아 준비합니다.

(일반적으로 많이 사용되는 나눔고딕의 경우 'http://shallbox.tistory.com/2' 해당 페이지를 참고하셔서 ttf, eot, woff파일 모두 받으실 수 있습니다.)

 

티스토리 관리자 페이지 > HTML/CSS 편집 > 파일 업로드

 

2. 다운 받으신 폰트를 업로드 합니다.

(업로드 하시면 자동으로 images폴더로 들어가게 됩니다. / 세가지 종류 모두 받으실 필요는 없습니다. eot와 woff 두 가지만 받아 주시면 됩니다.)

 

티스토리 관리자 페이지 > HTML/CSS 편집 > 스타일시트 편집

 

3. HTML/CSS 편집모드로 들어가 스타일시트에 다음과 같이 추가해줍니다.

 

@font-face {
font-family:NanumGothic;
src: url(./images/NanumGothic.eot);
src: local("나눔 고딕"), url(./images/NanumGothic.woff) format("woff");
}

블로그에 웹폰트 적용하기 폰트 변경하기.txt 

 

티스토리 관리자 페이지 > HTML/CSS 편집 > 스타일시트 편집

 

4. 스타일시트에서 font-family를 찾아 NanumGothic를 가장 앞에 추가해줍니다.

 

모빌리스 / 구글 웹폰트 이용하기

 

큰 줄기는 직접 업로드 하여 사용하는 것과 같습니다. 다만 앞선 방식이 직접 블로그에 업로드 하는 것이였다면 이번에 소개드리는 방법은 기존에 이미 업로드 되어 있는 폰트를 이용하는 방법입니다.

 

모빌리스 웹폰트 이용방법

 

1. 모빌리스 웹폰트 페이지에 접속합니다.

 

모빌리스 웹폰트 페이지 메인화면

 

2. 사용하고자 하는 폰트를 선택합니다.

 

@import소스

 

3. CSS 파일에 임포트 하는 소스를 복사하여 스타일시트 파일에 붙여넣습니다.

 

4. 이후의 방법은 직접 다운로드 하는 방법과 같습니다. Font-Family에서 NanumGothicWeb이라는 폰트를 가장 앞에 위치시켜주시면 됩니다.

 

구글 웹폰트 이용방법

 

1. 구글 웹폰트 페이지에 접속합니다.

 

구글 웹폰트 페이지 메인화면

 

 

2. 원하는 웹폰트를 선택한 후 Quick-use를 클릭합니다.

 

Quick-use > @import

 

3. @import를 선택, 해당 소스 코드를 스타일시트 파일에 붙여넣습니다.

 

4. 영문폰트만 있기 때문에 본문 전체에 사용할 일보다는 일부분에 사용할 일이 많습니다. 이럴 경우에는 에디터에서 HTML편집 모드로 들어가 'SPAN style="FONT-FAMILY: 사용하고자 하는 폰트 이름'을 추가하거나 수정해주시면 됩니다.

 

궁금하신 점은 덧글로 남겨주세요 :D

반응형

댓글