블로그에 유용한 CSS 5 - 티스토리 블로그에 웹폰트 적용하기 (3)

2014. 3. 13. 12:50IT/Tistory Tips

1. 글꼴(ttf → woff, eot) 변환 및 Dropbox 업로드

오랜만에 블로그 스킨을 바꾸려고 CSS를 편집하는데 유독 IE9, IE10에서만 웹폰트가 적용이 되지 않았다. IE9 이후로는 EOT뿐 아니라 WOFF도 지원한다는데 왜 안될까 고민하던 중 Google Fonts가 문득 생각나서 적용해보았다. 이상하게 CSS의 내용은 내가 작성한 것과 완전히 똑같은데 Google Fonts는 적용이 되고 내껀 안된다. 이런저런 테스트를 하다보니 IE9, 10에서는 티스토리 스킨에 업로드한 글꼴 파일을 불러오지 못하고 외부 링크에서만 제대로 읽어왔다. 그래서 클라우드 서비스를 활용하기로 했다. 웹폰트를 적용해봤던 적이 있다면 방법은 아주 간단하다. 외부에 woff 파일을 올리고 CSS @font-face의 src:url 부분을 외부 파일 링크로 지정하면 끝.

여기서 잠깐 웹폰트로 사용할 파일 형식에 대해 간단히 생각해보고 넘어가자. 예전 웹폰트를 적용할 땐 ttf, eot, woff, svg 네 가지 형식 글꼴을 사용했다. 각종 웹브라우저 버전마다 웹폰트로 사용할 수 있는 파일 형식이 서로 달랐기 때문이다. 그러나 요즘의 국내 인터넷/모바일 환경을 생각했을 때, eot와 woff 두 가지면 웬만한건 다 충족시킬 수 있다. 먼저, 사용자가 가장 많은 IE는 8버전까지 eot 형식을 지원하고 9버전 이상에선 eot, woff 두 가지를 지원한다. Firefox, Opera, Chrome, Safari 등 IE를 제외한 웹브라우저 대부분이 꽤 오래전부터 woff를 지원한다. 모바일 환경도 마찬가지다. 최근 몇 년간 출시된 스마트폰이라면 안드로이드, iOS 운영체제 모두 woff 형식의 웹폰트를 지원한다. 결론은, Firefox, Opera, Chrome, Safari를 사용하면서 굳이 오래된 예전버전을 고집하는 사용자는 많지 않을것 같고 대다수 사용자가 IE8, 9 이상을 사용하니 심플하게 eot와 woff 두 가지 형식의 웹폰트만 사용하자는 이야기다.

혹시 ttf를 woff, eot로 바꾸는 방법이 궁금하다면 [이전 글 보기] 중 '블로그에 유용한 태그 6 - 티스토리 블로그에 웹폰트 적용하기 (2)'를 참고한다. eot는 EOTFAST로, woff는 sfnt2woff로 변환활 수 있다.

웹폰트로 사용할 글꼴 파일(woff, eot 형식) 준비가 끝났다면, 이제 woff 파일의 외부 링크가 필요하다. 무료로 쓸 수 있는 클라우드 서비스 중 Dropbox가 Public 폴더 파일의 외부 링크를 제공하므로 이를 사용해보자. (업로드한 파일의 외부 링크를 제공하는 클라우드 서비스라면 어떤 것이든 상관없다.)

일단 Dropbox에 가입하고 Public 폴더에 woff 파일을 업로드한다. 위 그림처럼 Public 폴더의 파일을 클릭하면 [공개 링크 복사]라는 메뉴가 나온다. 이를 클릭해서 woff 파일 링크를 복사해둔다.

2. 티스토리 CSS 편집

이제 1에서 준비한 woff 외부 링크를 사용해서 티스토리 CSS를 편집해보자. CSS 편집은 @font-face만 지정해주면 되므로 아주 간단하다. 세부적인 내용이 궁금하다면 이전 글 내용을 참고한다.

@font-face {
                   font-family: '렉시새봄'; 
                   font-style: normal; 
                   font-weight: 400; 
                   src: url('./images/LexiSaebomR.eot?#iefix') format('embedded-opentype'),  /* IE8 이하 */
                         url('https://Dropbox 외부 링크.woff') format('woff')  /* IE9 이상, 기타 웹브라우저, 모바일 */
                 }

※ /* */ 사이의 내용은 주석 처리됨

티스토리에 로그인해서 [티스토리 관리] - [HTML/CSS 편집] - [HTML/CSS] - [style.css]로 이동한 다음 적당한 위치에 위의 코드를 붙여넣는다. 첫 줄의 'font-family'는 웹폰트에서 사용할 이름을 정하는 코드다. 글꼴 이름과 같아도 되고 달라도 상관없다. 두 번째 'font-style'은 이탤릭(italic) 여부를 정하는 부분이고 세 번째 'font-weight'는 두께(400=normal, 700=bold)를 정하는 부분이다. 마지막 src:url에서 첫 번째는 주석 내용처럼 '인터넷 익스플로러(Internet Explorer)' 8 이하에서 사용할 eot 파일의 경로를 지정하는 부분이고, 두 번째는 IE9 이상, Chrome/ Opera/ Firefox/ Safari 웹브라우저, 모바일 웹에서 사용할 woff 파일의 경로를 지정하는 부분이다. 'https://Dropbox 외부 링크.woff' 부분은 1에서 복사한 woff 파일 주소를 붙여넣는다.

@font-face 정의를 마치면 스타일을 지정할 때 'font-family'에 앞에서 지정한 웹폰트 이름을 쓰면 된다. 예를 들어 위에서처럼 지정했다면, 스타일 지정 시 font-family:'렉시새봄'을 입력한다.

맑은 고딕 나눔 손글씨 붓체 렉시새봄
모든 국민은 언론·출판의 자유와 집회·결사의 자유를 가진다. 모든 국민은 양심의 자유를 가진다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다. 모든 국민은 언론·출판의 자유와 집회·결사의 자유를 가진다. 모든 국민은 양심의 자유를 가진다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다. 모든 국민은 언론·출판의 자유와 집회·결사의 자유를 가진다. 모든 국민은 양심의 자유를 가진다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다.

실제로 웹폰트를 적용한 모습이다. 왼쪽은 웹폰트로 정의하지 않은 '맑은 고딕' 글꼴을 사용하도록 설정해서 컴퓨터에 '맑은 고딕' 글꼴이 없으면 '돋움'으로 표시된다. 가운데와 오른쪽은 웹폰트를 정의한 다음 '나눔 손글씨 붓체'와 '렉시새봄'을 각각 적용하였다. 휴대전화에서나 IE, Firefox, Opera, Chrome, Safari 웹브라우저에서 해당 페이지를 열었을 때 '맑은 고딕', '나눔 손글씨 붓체', '렉시새봄' 순서로 표시된다면 웹폰트가 제대로 적용된 것이다.


  • 프로필사진
    Favicon of https://seoulspring1980.tistory.com BlogIcon 뚜비정2014.09.13 02:14 신고

    며칠을 헤매다가 이 글 덕분에 블로그에 글꼴을 적용할 수 있었습니다. 고맙습니다! :)

  • 프로필사진
    Favicon of https://imaesblog.tistory.com BlogIcon Cacka IMae2020.02.25 11:07 신고

    바퀴의 블로그Software Hardware Game Technology

    https://roachsblog.tistory.com/
    어떤폰트 알고싶어용 알려주세용 ㅎ