[티스토리] 블로그 글꼴 웹폰트로 변경하기(나눔스퀘어)

티스토리 블로그 스킨의 글꼴을 변경하는 작업을 해보겠습니다.

블로그에서 가장 중요한 요소가 폰트 글꼴이라고 생각 되는데요.

아무래도 콘텐츠 가장 가독성 시각적인 부분을 담당하는 영역이기 때문이라고 생각 합니다.

제 블로그는 흉내내기님의 제작하신 CCZ-CROSS v1.0 스킨으로

반응형웹으로 제작되었기 때문에 모바일과 PC에서도 더 풍부하고 아름다운 텍스트를

볼 수 있는 폰트를 사용 해야합니다.

구글 크롬 요소 검사 `ctrl` + `Shift` + i

구글 크롬에서 제공하는 요소 검사는 전지전능 하시다

현재 제 블로그는 Noto Sans CJK KR 글꼴이 적용 된 것을 알 수 있습니다.

원래 Noto Sans CJK는 너무 용량이 커 웹폰트로는 적당하지 않아

Noto Sans CJK KR로 경량화된 폰트가 적용 되어 있습니다.

하지만 CJK KR은 Google Fonts Early Access 를 제공하지 않아

자체적으로 서빙을 하거나 아래 페이지에서 확인 후 사용 하시면 됩니다.

http://theeluwin.github.io/NotoSansKR-Hestia/

다시 본론

아무튼 다시 본론으로 돌아가서

아무튼 기존의 사용하는 글꼴이 PC 화면에서는 가독성이 좋지 않아서

(※본인 모니터의 해상도에 따라 차이가 있습니다.)

이번에 2016년 공개된 네이버의 나눔스퀘어 폰트를 적용 해보기로 했습니다.

꼭 필요한 2,350자만을 추려 용량을 가볍게 줄였고 웹 환경에서 보다 편리하게 사용

할 수 있으며, 모바일에서도 물론 선명하고 또렷하게 사용 할 수 있습니다.

(Noto Sans CJK도 마찬가지로 2,350자만 추려낸 경량화된 웹폰트입니다.)

하지만 최근에 나온 나눔스퀘어 및 나눔바른고딕은 CDN을 제공하지 않아서

개인이 웹서버에 폰트를 올려야 합니다.

나눔 고딕과 명조는 구글 폰트에서 style.css에 붙혀 넣기만 해도 바로 사용 가능합니다.

https://www.google.com/fonts/earlyaccess

나눔 바른 고딕은 아직 서비스를 하고 있지 않으나 구글링해보면

하지만 나눔바른고딕의 경우는 많은 분들이 CDN을 제공하고 있긴 합니다.

나눔스퀘어는 최신에 발표 된 것이라도 아직 없죠..

여기서 잔머리가 발동합니다.

2016년 나눔스퀘어가 발표되고

나눔글꼴 모두 테스트를 해볼 수 있는 홍보 사이트를 네이버에서 공개합니다.

http://hangeul.naver.com/2016/nanum

여기서 요소 검사를 한번 해봅니다!

구글 크롬 요소 검사 `ctrl` + `Shift` + i

구글 크롬에서 제공하는 요소 검사는 전지전능 하시다!!!!!!!!!

CSS 스타일시트 파일을 제공하고 있고 한번 열어보면..

그 위에 꺼를 열어봅니다. 마우스 우클릭 오픈뉴탭!

아니!!!!!!!! 폰트를 정리해 두었다니!!!!!!!!!

네이버느님 관대하시다!

제가 필요한 글꼴만 붙혀넣기해서 약간 수정을 해줍니다.

저는 네이버 나눔스퀘어만 우선 적용 해보겠습니다.

메모장이나 워드패드를 열고 작성


@charset "utf-8"; 

/*
 * Hangeul Nanum Font
 */

@font-face {
 font-family: 'NanumSquare';
 src: url(http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.eot);
 src: url(http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.woff) format('woff'),
      url(http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}

../webfont 는 http://hangeul.naver.com/webfont 로 수정을 해줘야합니다.

그리고 확장자를 fonts.css 로 저장해줍니다.

※ 아 이렇게 안하고 바로 스킨 html/css 편집기에서 style.css 에 붙혀넣기 해도 상관없습니다.

그리고 저장된 파일을 업로드 하고

skin.html 편집



<link rel="stylesheet" href="./images/fonts.css">

붙혀 넣기 해줍니다.

마지막으로 style.css 편집에서 수정할 부분을 찾아서 NanumSquare을

font-family 가장 앞부분에 입력 시켜 주면 됩니다.

저의 경우에는 Noto Sans CJK KR 이 부분을 NanumSquare 으로 모두 고쳐 주면 되겠죠?

네이버 웹폰트를 긁어 오는게 약간 편법이긴 한데.. 이렇게 해도 되는지 모르겠습니다. ㅠ_ㅠ

근데 될리가 없죠 ㅡ_ㅡ 외부링크로 가는 것을 막아 논 것 같습니다.

그나마 웹폰트별로 변환 해준것만으로도 감사할 따름입니다.

원래 기존폰트를 그냥 웹폰트로 사용하기 위해선 프로그램을 사용해 파일용량도 줄이고

다양한 확장자도 만들어 줘야하지만 그작업을 미리 해주었다는게 감사할 다름이네요!

한글 네이버 CSS 파일에 나와있는 경로에서 해당 글꼴들을 다운 받아줍니다.

블로그 스킨에 폰트를 적용하는 방법

크게 3가지가 있습니다.

html/css에 스킨에 font를 지정해주는 것

티스토리 파일업로드에 폰트를 올리는법

외부 서버를 이용하는 것

이 경우는 사용자가 본인 PC에 해당 글꼴이

있으면 보이고 없으면 보이지 않는 방식입니다.

거의 돋움이나 맑은 고딕 같은 글씨체죠.

장점은 페이지 로딩을 하지 않아 로딩 속도가 높을 수 있으나 각 방문자들의 폰트의 제한으로 가독성이 떨어진다는 단점이 있죠

~~해당 방법은 안정적이고 빠를 것 같긴 한데..~~

~~속도 차이는 모르겠습니다.~~

스킨 용량이 겁나 증가 할 수 있고

익스플로러에서는 잘 적용 되지 않을 수 있습니다.

또한 스킨을 바꿀때 일일히 업로드 해주지 않으면 사라질 수 있습니다.

대표적으로 구글폰트의 CDN을 이용 하거나

외부 서버를 이용하는 방식입니다.

기존에 있는 CDN을 사용한다면 가장 간편하게 사용 가능하나 혹시 개인이 파일을 올릴때 안정적이지 않은 서버에 올린다면 문제가 될 수 있습니다.

특히 개인 유저들이 올리거나

아예 웹폰트 호스팅 서비스를 하는 업체

자체가 문을 닫아버리는 경우도 존재합니다.

<티스토리 파일업로드에 폰트를 올리는법 내용 추가>

티스토리 유저라면 파일업로드로 폰트를 올리는 방식도 나쁘지 않습니다!

아직까지 국내 80%이상이 IE 익플 브라우저를 사용중이어서 브라우저 캐싱 효과를 보기가 힘들며

티스토리는 따로 서버관리를 하지않아도되 트래픽 문제가 발생하지 않기 때문에

폰트를 직접 집어넣고 사용하는 것이 빠릅니다.

나눔고딕 이라든지 구글cdn에서 거의 국민폰트로 웬만한 웹사이트에서 사용하는 경우에는

구글cdn을 사용해서 효과를 볼 수 있겠지만 그렇지 않은 경우에는 굳이 cdn을 사용하지 않아도 됩니다.

다시 본론으로 들어와서!!

~~나눔스퀘어 웹폰트 일일히 다운받아주고~~

~~구글 드라이브에 올려줍니다.~~

~~그리고 링크공유를 해서 링크를 가져오면 됩니다. 혹시나 공유 설정을 전체로 해주셔야합니다.~~

이방식은 이제 더이상 사용을 하지 않습니다.

구글 드라이브의 호스트 기능이 종료 됩니다.

많은 분들이 구글드라이브 호스트 기능을 사용 하는 것으로 아는데 걱정이네요.

드라이브 도움말 - https://goo.gl/ikigI5

그렇기 때문에 최종적으로 티스토리 블로그에 업로드를 해줍니다!!

기존 블로그 스킨 전체 용량이.. 835 KB 였는데

2배가 넘게 증가 했습니다.

그럴 수 밖에 없는게 폰트 자체가 원래 겁나 용량이 큰 편 입니다.

다음스퀘어가 제목용 글꼴로 매우 작게 나와서 이정도이지... 다른건 기본폰트 용량은 보통 2MB~4MB 에서

위에서 설명드린 Noto Sans CJK 의 기본폰트는 무료 16 MB 나 됩니다..

물론 아래 태그처럼 해당 포맷상태에서만 로드를 하겠금 해놓으면

페이지 로딩에 영향을 많이 미치지는 않을 것 같습니다.

ㅠ_ㅠ 일딴 구글이나 개인적으로 CDN을 제공하시는 분들이 나타날 때 까지 이방법을 사용 해야 할 것 같습니다.

티스토리 파일업로드에서 갖고 올때 최종적으로 이것을 붙혀야됨


@charset "utf-8"; 

/*
 * Hangeul Nanum Font
 */

@font-face {
 font-family: 'NanumSquare';
 src: url('./NanumSquareR.eot');
 src: url('./NanumSquareR.eot?#iefix') format('embedded-opentype'),
      url('./NanumSquareR.woff') format('woff'),
      url('./NanumSquareR.ttf') format('truetype');
}

예전에는 폰트명 경로를 ./images/NanumSquareR.eot 로 한적이 있었던거 같은데 대부분 포스팅들이 저경로입니다.

하지만 지금은 꼭 ./NanumSquareR.eot 적어야지 정상경로입니다.

가끔 eot 파일만 올리고 익스플로러에서만 보이고 글꼴이 크롬에서 안보인다고 하시는 분들이 있는데

파일을 각각 올려야 됩니다!! 이게 가장중요

그리고 마지막으로

사용 하고자 하는 영역에 CCS의 폰트 패밀리 가장 앞부분에 적어 주면 정상적으로 작동합니다.

바뀌기 전과 후 차이가 보이시나요??