티스토리 나눔스퀘어라운드 폰트 적용하는 방법

블로그의 디자인의 가장 중요한 요소가 폰트라고 생각합니다. 결국 방문자가 오는 이유도 글을 읽기 위해서입니다. 따라서 글꼴은 무조건 가독성이 뛰어나야 되고 읽기 편해야 합니다. 제가 사용하는 티스토리 반응형#2 스킨은 아쉽게도 가독성이 너무 떨어지네요. 그래서 이번에 폰트를 바꿨습니다. 

  

현재 폰트의 문제점

변경전 폰트입니다. PC나 스마트폰에서 글자가 너무 작아서 잘 보이지도 않네요. 특히나 두꺼운 글자는 마감이 깔끔하게 출력이 안되서 글자를 읽기도 힘듭니다. 게다가 글자색도 진하지 않아서 잘 보이지도 않구요.

PC, 스마트폰 변경전 폰트

폰트도 바꿔야 되지만 글자색도 바꿔야 겠습니다. 글자색은 검정색보다는 진한 회색을 추천합니다. 왜냐구요? 네이버, 구글, 다음 등 주요 사이트의 글자색이 그렇기 때문이죠. 모를땐 따라하는 것이 최선입니다. 

저는 Medium의 글자색을 참고할까 합니다. 미디엄은 이미지가 아닌 읽기, 즉 리딩에 특화된 플랫폼입니다. 아마 가독성에 가장 신경을 많이 쓴 플랫폼이지 않을까합니다. WhatFont로 확인을 해보니 글자색이 rgba(0,0,0,0.84)네요. 그대로 제 코드에 반영하면 되겠습니다. 

2018/12/29 - [티스토리] - WhatFont로 웹사이트나 블로그의 폰트와 글자색 쉽게 확인하기

미디엄 폰트색상 확인

어떤 폰트를 적용할까?

수많은 폰트중에 어떤 폰트를 적용할까? 2년 넘게 고민해도 결론이 안나네요. 처음엔 나눔고딕을 사용했는데 모바일 가독성은 괜찮은데 글꼴이 너무 진부하다고 할까요? 쉽게 질리더라구요. 가독성도 좋고 예쁜 글꼴을 찾다가 압축한 것이 렉시새봄 폰트와 나눔스퀘어라운드 글꼴입니다. 

2개 모두 폰트도 예쁘고 가독성도 뛰어나서 사용하는 파워블로거도 많더라구요. 나눔스퀘어라운드가 화려하지 않으면서 오랫동안 질리지 않을거 같아 결국 나눔스퀘어라운드 폰트를 적용하기로 했습니다. 

지금 이 글의 폰트가 바로 나눔스퀘어 글꼴입니다. 렉시새봄 적용 블로그는 여기를 참고하세요. 

※ 필기체, 너무 화려한 폰트 등은 피하시길 바랍니다. 글을 읽기가 힘들어서 기껏 찾아왔다가 안보고 나가는 유저가 더 많을 것입니다. 

폰트를 적용하는 방식

폰트를 웹사이트에 적용하는 방식은 크게 2가지입니다. 

1. 웹폰트 링크 방식

웹폰트는 외부에 폰트파일이 있고 그 파일의 링크를 불러오는 방식입니다. 구글이나 특정 서버에서 제공하는 폰트파일을 불러오는 방식으로 스킨에 코드 몇줄만 추가하면 되기 때문에 아주 간편합니다. 

문제는 폰트파일을 불러오는 서버가 언제 중단될지 모른다는게 불안합니다. 구글이야 망할일 없겠지만 다른 외부 사이트는 속도도 느릴 수 있고 언제 서비스를 중단할지 모르는 일이죠. 

2. 티스토리에 설치

티스토리에 폰트파일을 업로드하는 방식입니다. 티스토리에 저장된 폰트파일을 사용하기 때문에 안정적으로 폰트를 사용할 수 있습니다. 적용하는 방법이 웹폰트 링크보다 복잡하긴 하지만 안정적으로 폰트를 지원할 수 있기 때문에 설치하는 방식으로 진행했습니다. 

티스토리에 나눔스퀘어라운드 폰트 적용하기

1. 나눔스퀘어라운드 폰트 다운로드

먼저 폰트파일을 다운로드해야합니다. 

【GitHub 나눔스퀘어라운드 다운로드】

깃허브 나눔스퀘어라운드 파일 다운로드

나눔스퀘어폰트도 두께에 따라 다양한 버전이 있습니다. 두께는 NanumSquareRoundL < NanumSquareRoundR < NanumSquareRoundB < NanumSquareRoundEB 순입니다. 저는 가장 무난한 NanumSquareRoundR로 설치했습니다. 

총 4개의 파일을 받아야 합니다. .eot .ttf .woff . woff2 가 세트입니다. 인터넷 브라우저, 운영체제 등에 따라 다른 파일이 필요하기 때문에 이렇게 4개를 모두 다운로드 바랍니다.

2. 티스토리에 파일 업로드

티스토리 관리페이지→꾸미기→스킨변경→스킨편집→html 편집→파일업로드 순으로 이동합니다. 아래에 추가 버튼을 누르고 다운로드 받은 4개의 폰트파일을 업로드합니다. 

티스토리에 폰트파일 업로드

3. CSS 수정

파업로드 후 CSS탭으로 이동하여 아래 코드를 CSS코드 상단에 붙여넣어주세요.

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

그리고 CSS 코드 중 body 부분에서 font-family를 찾아야됩니다. 찾기 힘드실 땐 Ctrl+F 버튼을 누르고 font-family로 검색하셔도 됩니다. 

body,th,td,input,select,textarea,button 
{font-size:14px;line-height:1.5;
font-family:'NanumSquareRoundR', sans-serif;color:#666}

 

원래는 폰트 패밀리에 다른 폰트가 지정되어 있었는데 'NanumSquareRoundR' 로 변경했습니다. 이렇게 원래 있던 폰트명을 'NanumSquareRoundR'로 바꿔주면 해당 영역이 나눔스퀘어폰트로 바뀝니다. 

CSS 수정

4. 글자크기, 글자색, 간격 바꾸기

위에서 설정만 바꿔줘도 나눔스퀘어폰트가 스킨에 적용됩니다. 하지만 글자크기, 글자 컬러, 줄간격도 수정을 하고 싶었습니다. 

수정을 위해 Ctrl+F 를 누르고 .area_view p 를 검색합니다. 본문의 폰트 관련 설정은 이 부분에 있습니다. 글꼴의 크기를 키우고 싶다면 font-size 를 높이면 됩니다. 줄간격은 line-height , 글자색은 컬러를 수정하면 됩니다. 수정 후 좌측의 새로고침 버튼을 누르면서 가장 적절한 값을 찾아내야 합니다. 

글자크기, 글자컬러, 줄간격 수정

저는 아래와 같이 수정했습니다. 폰트와 줄간격을 키우고, 컬러는 미디엄에서 찾은 컬러로 수정했네요. 

.area_view p {font-size:18px;line-height:32px; 
  margin:0 auto 28px; color:rgba(0,0,0,0.84);}

티스토리 반응형#2 스킨의 경우 스마트폰 폰트가 따로 지정이 되어 있더라구요. 혹시 스마트폰에서 폰트가 변경되지 않으면 .area_view 로 검색해서 폰트패밀리를 변경해 주시면 됩니다. 

스마트폰 글꼴 수정

아래와 같이 기존 글꼴 앞에 나눔스퀘어를 추가해주니 스마트폰에도 정상적으로 폰트가 적용이 됩니다. 

마치며..

지금 보고 계시는 이 글꼴이 나눔스퀘어라운드R 입니다. 어떠신가요? 가독성 괜찮나요? 이게 참 어렵네요. 저는 괜찮은거 같은데 다른분들이 어떻게 받아들이실지 알수가 없으니까요. 피드백 주시면 감사하겠습니다. 

코드의 복사가 잘 안되네요. 원인을 찾고 있으니 코드 필요하신분은 아래 메모장 파일로 다운바랍니다. 

코드.txt