티스토리에서는 기본으로 '본고딕(Noto Sans), 나눔 고딕, 본명 조, 궁서' 이렇게 4가지 폰트를 제공하고 있습니다. 오늘은 티스토리 전체에 이 기본 폰트를 적용하는 방법을 소개하고자 합니다.
Noto Sans 폰트를 적용하기 위해서 무려 폰트 이야기 총 4탄의 글이 이어졌습니다. 오늘 드디어 Noto Sans 폰트를 잇 플래닛에 최적화까지 고려하여 효과적으로 적용할 수 있을 것 같습니다.
저는 그렇다 보니 Noto San를 기준으로 설명하지만, 나눔 고딕에도 똑같은 방법으로 적용 가능합니다. 함께 소개하도록 하겠습니다!
티스토리 기본 폰트(Noto Sans, 나눔 고딕) 적용하기
1. Noto San KR (본고딕) 이란?
구글과 어도비가 합작으로 제작한 오픈 소스 폰트입니다. 2014년에 한국어, 일본어, 중국어를 모두 수용하는 Noto San CJK가 공개되었으며, 두께가 무려 7종류가 되는 폰트입니다.
상업적으로도 이용이 가능하고, 가독성이 좋고 디자인도 깔끔하여 많은 사람들에게 사랑받고 있는 무료 인기 폰트라고 할 수 있습니다. 저 또한 원래부터 산 셰리프 계열의 글씨를 좋아하고 그중에서도 본고딕을 참 좋아합니다. 왠지 사용하는 것만으로도 해당 페이지가 디자인이 된 느낌이 들기 때문입니다. 한글 및 영어만 사용하려면 Noto Sans KR을 다운로드하여서 활용하면 되지만 두께가 다양한 만큼 사실 용량이 큰 폰트입니다.
티스토리에서는 이 본고딕(Noto sans)을 기본으로 제공하고 있습니다. 본고딕뿐만 아니라 나눔 고딕, 본명 조, 궁서체도 함께 에디터에서 제공되고 있습니다.
* 티스토리 에디터에서의 본고딕 R은 Noto Sans KR DemiLight, 본고딕 L은 Noto Sans KR Light입니다.
2. 그럼 에디터에서 글씨체 선택하면 되지 않나요?
물론 티스토리 전체에 Noto Sans과 같은 기본 폰트를 적용하는 것이니라, 본문 중 몇 문장이나 단어에만 적용하고 싶다면 에디터에서 적용해도 무방합니다.
하지만 티스토리 '스킨 편집'에서 글씨체를 나중에 변경하더라도 해당 문장이나 단어는 본문에서 적용한 글씨체가 유지됩니다. 즉, 티스토리 전체의 글씨체를 '스킨 편집'에서 변경하면 적용되지 않는다는 유의점이 있습니다. (그래서 저는 가급적이면 에디터에서 글을 쓸 때에 폰트를 수정하지 않는 편입니다.)
| 변경 방법 |
① 티스토리 '에디터'에서 폰트 변경 | ② 티스토리 '스킨 편집'에서 폰트 변경 |
| 변경 범위 |
본문에서 직접 지정하는 만큼 | CSS 선택자를 사용하여 본문, 메뉴, 카테고리, 태그, 댓글 등을 지정하여 변경 가능 (전체 변경도 가능) |
| 추후 변경 |
한 번 본문에서 폰트를 변경하면 다시 변경하기 어려움 (본문의 폰트가 지정된 부분을 하나씩 수정해야 함) | '스킨 편집'에서 언제든 일괄 변경 가능함 |
하지만 오늘 함께 살펴보고자 하는 내용은 본문에만 폰트를 적용하는 것이 아니라 메뉴, 카테고리, 태그, 댓글 등 티스토리 전체에 Noto Sans 또는 나눔 고딕을 적용하는 방법입니다. 물론 지난 시간에 소개한 것처럼 구글 폰트 사이트에서 웹폰트 URL이 포함된 코드를 복사해서 사용할 수 있지만, 오늘은 티스토리에 탑재된 폰트 URL을 통해서 폰트를 로딩해 사용하는 방법을 소개하고자 합니다.
3. 티스토리가 제공하는 기본 폰트 URL
그렇기 때문에 우리에게 필요한 것은 폰트가 탑재된 티스토리 서버의 URL입니다. 티스토리에는 다양한 폰트가 기본으로 탑재되어 있습니다. Noto Sans, Noto Serif, 나눔 고딕, 나눔 명조, 나눔 바른 고딕, Spoqa Han Sans의 경우 아래와 같이 URL을 확인할 수 있었습니다.
티스토리에 기본으로 제공되는 폰트가 에디터에서 볼 수 있는 본고딕, 본명 조, 나눔 고딕, 궁서체 외에도 위와 같이 다양함을 알 수 있습니다. 하지만 위에 URL을 활용할 필요도 없이, 티스토리에 직접 연결된 font 스타일시트가 있습니다.
[참고] 티스토리에 연결된 font.css 확인하기
클릭해보면 font.css를 확인할 수 있습니다.(링크 연결) 저는 웹페이지 속도를 측정하는 구글의 Page Speed Insights 사이트에서 잇 플래닛의 블로그의 속도를 측정하였고, 결과 내용 중에서 font.css의 주소를 확인할 수 있습니다.
• local: 괄호 안의 이름의 폰트가 사용자 PC에 저장되어 있는지 확인하여 있으면 사용합니다. 이 경우 뒤이어 나오는 URL들의 웹폰트는 다운받지 않도록 하여 페이지 속도에 유리합니다.
• format('woff2'): 확장자 woff2 지원 가능 브라우저인지 확인하여, 지원하면 앞의 URL에서 폰트를 다운받아 사용하라는 의미입니다.
• format('woff'): 확장자 woff 지원 가능 브라우저인지 확인하여, 지원하면 앞의 URL에서 폰트를 다운받아 사용하라는 의미입니다.
• IE8 이하의 브라우저에서는 woff2, woff 모두 지원하지 않아서 확장자 eot의 폰트 파일을 사용해야 합니다. 저는 따로 웹폰트를 로딩하지 않고 CSS에서 폰트 지정 시에 폴백폰트(맑은고딕 등)를 지정해 놓는 방법을 사용하였습니다.
4. 이제 티스토리 전체에 기본 폰트 적용하기
이제 본문, 댓글, 메뉴명, 카테고리명 등에 해당 폰트의 이름을 넣어 적용해줍니다. 해당 선택자를 찾아 지정하면 되지만, 저는 티스토리 전체에 Noto Sans를 적용하기 위해 아래와 같이 많은 선택자를 나열하였습니다.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;
}만약 나눔 고딕을 지정하고 싶은 분들은 위에서 'Noto Sans KR' 대신에 'Nanum Gothic'를 맨 앞으로 넣어서 사용하시길 바랍니다. (노토 산스, 나눔 고딕, 산세리프 계열 폰트를 각각 순서대로 로딩하여 사용하기 때문입니다.)
마무리하기
사이트에 폰트 파일을 직접 업로드하여 적용하는 방법, 구글 폰트 사이트에서 폰트 URL을 가져와 적용하는 방법, 그리고 마지막으로 오늘 티스토리 기본 제공 폰트의 경우 쉽게 적용하는 방법까지 살펴보았습니다. 즉, 기본 제공 폰트의 경우 따로 폰트 파일을 업로드하거나 URL을 가져올 필요 없이 바로 적절한 선택자(body, div 등등)에 폰트명을 넣어 적용할 수 있었습니다.
물론 티스토리 폰트를 변경하는 방법에는 각각 장단점(빠른 속도, 편리성, 트래픽 등)이 있습니다. 하지만 정보를 탐색해보니 사이트에 폰트 적용하는 데 있어서 무엇보다 중요하게 인지되어야 하는 것은 웹폰트를 많이 사용하지 않는 것이었습니다. 물론 다양한 글씨를 사용하는 것이 UI 디자인 측면에서는 유리할 수 있지만, 속도면에서는 확실히 사이트에 부담을 주는 것이라는 생각이 들었습니다. 웹디자이너 급의 전문가가 아니라면 큰 용량의 폰트나 다양한 폰트를 사용하는 것보다는 가독성을 고려해 적절한 개수의 폰트를 사용하는 것이 좋지 않을까 합니다.
긴 글을 읽어주셔서 오늘도 감사드립니다. 모쪼록 저와 같은 티스토리 초보자 분들이 모두 성공적으로 티스토리 폰트를 변경하시길 기원합니다!
'티스토리' 카테고리의 다른 글
| 티스토리 북클럽스킨 : 정사각형 썸네일로 바꾸기(베스트셀러) (0) | 2021.09.26 |
|---|---|
| 티스토리 북클럽스킨 : 블로그 타이틀 변경하기(글씨체, 이미지) (0) | 2021.09.25 |
| 티스토리에 폰트 직접 업로드해서 적용하기 (0) | 2021.09.19 |
| 티스토리 웹폰트가 무거워요! 최적화 방법은? (0) | 2021.09.11 |
| 티스토리 전체 폰트(글씨체) 순식간에 바꾸는 방법 (0) | 2021.09.09 |
댓글