블로그 웹폰트 적용하기 01.티스토리 글꼴 등록

저번 스킨을 수정할 때엔 윈도우 기본 글꼴을 사용해서 관심이 없었는데 이번 Fastboot 스킨을 사용하면서 글꼴 때문에 신경질이 났어요.

다른 블로그를 보고 열심히 나눔고딕 글꼴을 설정했는데, 크롬에서 적용이 안 되는 거예요.ㅠㅠ

너무 답답해서 이리저리 검색해보다 웹폰트의 개념과 함께 크롬에서의 미적용 이유를 알게 되었네요. 부들부들...난 바보였구나.

혹시 저처럼 블로그 글꼴 때문에 답답해하시는 분이 있을까하는 마음으로, 블로그에서 폰트 적용하는 방법에 대해 포스팅합니다.

 

 

 

#1. 웹폰트란? 

텍스트가 들어가는 문서를 작성하여 다른 컴퓨터에서 실행하면 기껏 설정해놓았던 글꼴이 적용 안 되는 경우가 있습니다.

문서를 실행시키는 컴퓨터마다 해당 글꼴이 설치되어 있어야만 제대로 적용되기 때문인데요, 대학시절 프레젠테이션을 발표할 때마다 USB에 해당 글꼴파일도 저장해서 다닌 기억이 납니다.

 

인터넷으로 접속하는 웹문서도 마찬가지입니다.

블로그나 웹사이트를 꾸밀 때 아무리 예쁜 글씨체를 적용했다 하더라도 방문하는 사람들의 컴퓨터마다 일일이 해당글꼴이 설치되어 있지 않다면 아무소용없는 거죠.

 

그래서 개인 컴퓨터의 환경에 상관없이

웹사이트를 열었을때 누구나 지정한 글꼴이 적용되어 보이게끔 하는 것이 웹폰트입니다.

폰트를 서버에 올려서, 그 웹문서를 열때마다 임시로 다운로드하여

방문자의 컴퓨터에 해당 글꼴을 설치한다 생각하면 되겠습니다.

 

 

 

#2. 폰트 포맷 (글꼴파일 형식)

 

인터넷 브라우저 마다 지원하는 폰트 포맷이 다릅니다. (전 이게 문제였던거예요!!ㅠㅠ)

가벼워서 많이들 사용하는 EOT 파일은 익스플로러에서만 작동합니다. 크롬이나 사파리 등에서는 적용이 안된답니다.

익스플로러 이외의 브라우저를 사용하는 분들이 많아졌기 때문에 요것만 적용해서는 아니되겠죠.

크롬이나 파이어폭스에서는 WOFF,

사파리에서는 TTF를 지원하고 있다고 합니다.

 

 

 

#3. 웹폰트 적용 방법

 

티스토리 블로그에서 웹폰트를 적용하는 일반적인 방법은 HTML/CSS 편집에서 글꼴 파일을 하나하나 업로드 하는 거예요.

 

그런데 브라우저마다 지원하는 폰트가 달라서 포맷방식별로 업로드 해야하기도 하고,

혹 다양한 글꼴을 적용해야한다면, 용량때문에 트래픽의 부담이 됩니다. TTF 이런건 많이 무겁거든요.

 

이런 문제때문에 다음으로 할 수 있는 방법이 웹폰트를 제공하는 업체를 통해 링크주소만 가져와 적용하는 겁니다.

이걸 무슨 방식이라고 칭하는지는 모르겠어요;

대표적으로 무료 라이센스의 웹폰트를 제공하는 구글 폰트가 있습니다.

 

제가 사용하고 있는 fastboot v.1.6.2 스킨을 바탕으로 이 두 가지 방법을 모두 적용하여 글꼴을 변경해볼텐데요.

이번 포스팅에서는 폰트파일을 직접 업로드하여 설정하는 것까지 다룰 거예요.

 

 

 

 

#3. 티스토리 블로그 웹폰트 직접 등록

 

우선 웹폰트로 적용할 글꼴파일이 있어야합니다. (물론, 글꼴에 대한 라이센스를 가지고 계셔야겠죠!)

글꼴 포맷은 보통 TTF로 가지고 있을텐데 변환프로그램을 이용해서 포맷방식을 바꿔줘야해요.

여기서 파일 변환방법은 다루지 않으려고 했는데, 사실 간단해요.

아래 사이트에서 변환프로그램을 다운로드하여 압축을 풀어주시구요.

 

EOT변환 :  eotfast.com

WOFF변환: people-mozilla.org/~jkew/woff/

 

준비된 글꼴파일을 끌어다가 실행파일위에 던지시면 됩니다! 드래그앤드랍.

아래 GIF를 참고하세요. EOT 파일 변환 예시입니다.

 

 

 

 

자 이렇게 준비된 글꼴파일을 이제 업로드 합시다.

관리>꾸미기>html/css편집> 아래와 같은 화면을 띄우세요.

 

파일업로드 탭에서, 추가 버튼을 눌러 변환한 글꼴파일을 첨부하세요.

제대로 첨부가 되었는지 확인 후 저장~

 

 

 

이제 저장한 폰트를 CSS에서 지정해주기만 하면됩니다.

폰트를 불러와 정의하는 태그부터 작성합시다. @font-face.txt

 

@font-face

{
   font-family: 'NanumPenweb';  /*폰트명. 임의로 지정*/
   font-weight: normal; /*폰트 굵기*/
   src: url('./images/NanumPenScript-Regular.eot');  /*폰트 서버 경로*/
}

이 외에도 기타 관련 속성들이 있습니다만, 간단하게 세가지만 입력하겠습니다.

font-family는 불러오는 폰트에 부여할 이름입니다. 이 이름으로 CSS에서 사용할겁니다. 내 마음대로 설정해주세요.

저는 NanumPenweb 라고 했습니다.

font-weight는 폰트 굵기에 대한건데요. 기본값을 굵게 하고 싶다면 bold, 일반으로 하고 싶다면 normal 등으로 지정할 수 있는데 글꼴마다 지원하는게 다르니 참고하세요.

전 normal로 했습니다.

src: url은 폰트가 존재하는 경로입니다. 경로를 올바르게 입력해야 폰트파일을 제대로 찾아오겠죠?

위 사진의 오른쪽 초록박스처럼, 티스토리 파일업로드시 확인하신 경로 그대로 입력하시면 돼요.

 

CSS의 상단에 위 태그를 삽입하세요. (아래 사진 ②)

 

 

이제 font-family를 찾아서 제가 정의한 폰트를 추가하면 끝입니다. 저같은 경우에는 'NanumPenweb' 이름으로 추가를 하면 되겠죠.

fastboot v1.6.2 스킨을 사용중이시라면, 제가 일단 얼핏 찾아보기로는

@charset에서 한 번 (위 사진 ③)   #sidebar에서 두 번 (아래 사진 ④,⑤) 추가하면 되네요.

 

 

익스플로러에서 확인하면 이렇게 글꼴이 변했습니다.  설명을 위해서 확 표시가 나는 글꼴로 적용했는데 눈아프네요ㅠㅠ

앗, 상단의 메뉴랑 Posted by 글꼴이 여전하네요. CSS에서 별도로 폰트 속성을 주면 됩니다.

 

 

근데~위에서 설명드렸다시피 EOT 포맷으로 하면, 구글크롬 접속시 이렇게 글꼴 적용이 안 됩니다.ㅠㅠ

WOFF 포맷으로 업로드를 하거나, 다음 포스팅에서 다룰 구글 웹폰트로 적용하면 해결이 되겠죠.

이 간단한 것을 제가 그렇게 끙끙 앓았답니다.

 

다음 포스팅에서는 구글 웹폰트로 글꼴을 적용해볼게요.

이번 방법에 비하면 정말 너무너무 쉽답니다.

 

다음글 ☞ 블로그 웹폰트 적용하기 02.구글 웹폰트 사용