EnglishFrenchGermanItalianKoreanPortuguese


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


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를 적용해본 전체적인 모습(스압)



아리따움 배경화면 앱(app) 설치하기

  1. profile

    Kiss Me님 폰트적용글 잘 보았습니다.
    추가로 나눔글씨체를 적용하고 나니 기존의 10PX로 작성된 글들이 작아보여서 고민입니다.
    그래서 글씨체를 12PX로 적용하려고 전체 폰트사이즈 키우는 법을 검색해보았는데..
    2시간째 허탕만 치고 있습니다.

    파일업로드 방식 및 CSS추가로 폰트를 스킨에 적용했을때 글씨체를 키우는 법에대해서는
    잘나와있지 않은것 같은데 도움이 구해봅니다.. ㅠ

    2018.12.23 01:53 신고 수정 / 삭제 답글
1 2 3 4 5 6 ··· 16
이전 다음
URL이 복사되었습니다.