애쉬 블로그에 나눔 스퀘어 웹폰트를 입히다.

지난 목요일에 학교 과제를 하나 해 놓고 나니, 주말에는 약간 여유가 나네요^^

덕분에 간만에 블로그에 신경 좀 썼습니다. 바로 블로그 폰트 바꾸기였습니다. 

지금까지 제 블로그는 나나님이 만드신 스킨 거의 그대로를 사용했거든요.. 폰트도 기본으로 지정되어 있던 나눔바른고딕을 

계속 유지해왔는데... 음... 오늘 보다보니, 본문 글자도 좀 작은 느낌이고, 폰트도 먼가 더 이쁜 폰트 없나..고민하다가....

작년 네이버가 고맙게도 무료로 배포한 나눔스퀘어 폰트를 보게 되었습니다. 

그리고 여러 블로그에서 웹폰트를 지정해서 사용하고 있는 것도 보았구요..

그래도 저도 한번 적용해 봅니다. 

일단 나눔 스퀘어는 아래와 같은 폰트입니다.

이쁘죠? 모바일에 최적화 되어 있다는 소개글이 있었습니다. 

----------------------------------- 네이버 나눔스퀘어 소개 --------------------------------

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

반듯한 직선으로 제목에 잘 어울리며 모바일에서도 잘 보이는 글꼴입니다.

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

글꼴을 설치하면 다양한 굵기와 크기로 쓸 수 있습니다.

나눔스퀘어 Light, Regular, Bold, Extra Bold / 한글 2,350자, 영문 94자, KS약물 986자

-----------------------------------------------------------------------------------------------

적용하는 법은 간단합니다. 

1. 나눔스퀘어 글꼴을 다운받고 설치합니다.

2. 웹폰트를 만듭니다. (woff, eot 파일을 각각 만듭니다.)

  윗 단계 직접 하시려면 불편하시죠?^^ 그래서 제가 만들어놨습니다. 

  저도 다른 분이 만든거 사용하다가...그 분은 용량을 너무 줄이셔서 '케잌' 의 '잌'과 같은 글자가 표현이 되지 않아서...

  제가 직접 나눔스퀘어 폰트 원본 그대로 다시 만들었습니다.  워낙 원본 자체가 모바일 최적화 폰트라... 수정하지 않고 

  만들어도 200KB 정도의 아주 가벼운 웹폰트가 되었답니다.  

  제가 지금껏 사용하던 나눔바른고딕 웹폰트가 거의 2M였으니.... 거의 1/10으로 줄어들었네요.

 

NanumSquareR.eot

NanumSquareR.woff

 브라우저에 따라 eot, woff 각각 다 필요할 수 있으니 다 넣어주시면 됩니다.   

3. 티스토리 블로그 환경설정 -> html/css 편집 -> 업로드에서 2에서 만든 파일을 업로드한다.

4. 같은 화면에서 CSS를 선택한 다음에 아래 코드를 삽입한다.

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

5. CSS에서 font-family: 이렇게 표현된 곳을 찾아서 아래와 같이 설정해준다. 

font-family:'NanumSquare',sans-serif;

네, 여기까지 하셨으면 다 된 것입니다.

바로 이렇게요..

이렇게 되셨으면, 기분좋게 저장하시면 변경된 웹폰트가 적용된 블로그를 보실 수 있습니다.

전 폰트크기는 14px정도로 했는데 보기가 괜찮네요.

제 스스로의 기록 겸  좀 더 쉽게 적용해 보실 분들을 위해 블로그에 올려봅니다.