티스토리 블로그 나눔스퀘어 라운드 웹폰트 적용 방법

먼저 이야기 드리자면, 지금 보고 계시는 블로그에 적용된 폰트가 나눔스퀘어라운드 폰트입니다 :)

Fastboot 스킨을 사용할 땐 나눔 고딕 웹폰트를 사용했었는데, 블로그를 다시 관리하기 시작하면서 블로그 스킨을 #.01 스킨으로 변경하면서 웹폰트도 나눔 고딕에서 나눔 스퀘어 라운드로 변경하였습니다.

동글동글하니 라운드 처리가 살짝 되어 개인적으로 마음에 드는 폰트입니다.

가끔 블로그에 사용하는 폰트가 어떤 거냐고 문의하시는 분들이 계셔 간단하게 설명드립니다.

이번 티스토리에 새로 올라온 Poster 스킨에 나눔 스퀘어 라운드 웹폰트를 적용해보겠습니다.

나눔 스퀘어 라운드 폰트 예

▶ 나눔스퀘어 라운드 eot, woff, woff2 웹폰트 Github에서 다운로드

https://github.com/innks/NanumSquareRound

위 링크에 들어가서 Light 또는 Regular 파일들을 다운로드

link 방식이나 import 방식은 편해서 좋긴 한데.. 간혹 폰트를 불러올 때 오래 걸리는 경우가 있어, 용량이 크지 않아 로딩 속도를 높이고자 저는 그냥 티스토리에 직접 업로드해서 사용합니다.

▶ 나눔스퀘어 라운드 Light 용량

eot + woff + woff2 = 1.87MB

eot + woff + woff2 + ttf = 2.84MB

▶ 나눔스퀘어 라운드 Regular 용량

eot + woff + woff2 = 2MB

eot + woff + woff2 + ttf = 3.01MB

TTF 폰트 파일을 합쳐도 용량이 그리 크지 않습니다.

link 방식이나 import 방식으로 사용하실 분은 위 링크 하단에 나온 설명대로 하시면 됩니다.

폰트 이름과 확장자 확인 후 다운로드

다운로드한 파일들을 관리자 페이지 - 스킨 편집 - 파일 업로드 - 추가 후 우측 상단 저장

CSS 탭으로 이동 - @font-face... 부분 입력 - font-family 부분 사용할 폰트명 입력 - 우측 상단 저장 - 끝

첨부파일 메모장에 입력해두었으니 첨부파일을 다운로드해 입력하시면 됩니다.

나눔스퀘어 라운드 웹폰트 CSS.txt

나눔 스퀘어 라운드 Light 적용했을 때

나눔 스퀘어 라운드 Regular 적용했을 때

차이가 보이시죠?

참고로 font-weigh

Regular(400) / Light(300) 입니다.

▶ 아래는 Regular를 적용해본 전체적인 모습(스압)