[티스토리] 티스토리 폰트 변경, 웹폰트 적용
블로그를 디자인하기 위한 여러 방법이 있지만, 그중에서도 중요하다고 생각하는 건 폰트입니다. 주 콘텐츠가 글로 이루어진 블로그 특성상, 적절한 폰트를 사용하면 가독성과 디자인 측면에서 좋은 효과를 줄 수 있습니다.
티스토리 블로그에 폰트를 적용하기 위한 여러 가지 방법 중 적용이 간편하고 해당 글꼴이 없어도 출력이 가능한 웹폰트를 이용해 폰트를 변경해보겠습니다.
◆ 목차
#.1 구글 폰트 이동
티스토리 블로그에 폰트를 적용하기 위해 구글 폰트 사이트로 이동해줍니다. 검색엔진에 '구글 폰트'를 검색하거나 연결한 링크를 통해 접속할 수 있습니다. 구글 폰트를 통해 원하는 글꼴을 웹폰트로 쉽게 적용할 수 있습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
#.2 적용할 웹폰트 선택
구글 폰트 사이트에 접속했다면 'Language' 부분을 선택해 'Korean'으로 변경해 줍니다. 그러면 해당 옵션에 맞는 폰트들이 나열되는데 이 중에서 마음에 드는 폰트를 선택해줍니다. 저는 Google에서 제공하는 'Noto Sans KR'을 선택했습니다. 해당 폰트는 무난하면서 가독성이 좋아 추천드리는 폰트입니다.
원하는 폰트를 선택하고 나면 'Select this style' 버튼을 눌러 원하는 스타일을 선택해줍니다. 원하는 스타일을 선택하고 나면 우측에 'Selected family' 창이 나타나는데 해당 창의 'Use on the web' 탭 아래의 '@import' 부분을 선택해줍니다. 그러면 문자열들이 나오게 되는데, 해당 문자열들을 CSS 파일에 넣어주면 웹폰트를 적용할 수 있습니다. 여기까지 진행하셨다면 웹폰트 적용을 위해 티스토리 블로그의 CSS 파일을 수정해보겠습니다.
#.3 티스토리 블로그 CSS 파일 수정
티스토리 블로그 CSS 파일을 수정하기 위해 관리자페이지로 이동해줍니다. 자신의 티스토리 블로그 도메인 뒤에 '/admin'을 입력해주면 관리자페이지로 이동할 수 있습니다.
관리자페이지로 이동했다면, 좌측 메뉴바 꾸미기 탭에 '스킨 편집'을 선택해줍니다.
스킨 편집을 위한 새 탭에서 우측 상단에 현재 적용중인 스킨과 html 편집 버튼이 존재합니다. CSS 파일을 수정하기 위해 해당 html 편집 버튼을 선택해줍니다.
html 편집 탭의 상단에 'CSS'를 선택해준 다음, 구글 폰트 사이트에서 @import 버튼 아래의 <style> 태그 안 문자열들을 복사하여 CSS 파일의 @charset "UTF-8"; 해당 구문 바로 아래에 넣어주도록 합니다.
다음으로 Ctrl+F 단축키를 눌러 검색창을 활성화하고, 'font-family'를 검색해 해당 구문의 앞열에 구글 폰트에서 확인한 'CSS rules to specify families' 부분의 문자열을 넣어주면 됩니다. 앞열부터 폰트를 적용하기 때문에 적용하고자 하는 폰트를 꼭 앞열에 적어주시고, 폰트와 폰트 사이는 반점(,)을 넣어 구분해주어야 합니다. 또한 구문의 마지막에는 세미콜론(;)을 넣어 마무리해 주도록 합니다.
Ctrl+G 단축키를 통해 다음 검색 결과로 이동할 수 있으며, 이렇게 CSS 파일에서 'font-family' 부분을 모두 수정하고 적용해주면 블로그에 웹폰트가 적용됩니다.
#.4 블로그 폰트가 변경되었습니다
이렇게 html 파일 수정을 통해 웹폰트를 적용해보았습니다. 티스토리 블로그에선 별다른 폰트 변경 기능을 지원하지 않기 때문에, 코딩에 대한 이해가 아직 부족하신 분들은 다소 어려움을 느끼실 수 있을 거라 생각합니다. 하지만 게시글을 보고 천천히 따라 하시다 보면 충분히 이해할 수 있고 적용할 수 있는 부분이라 생각하니 포기하지 말고 따라와 주시길 바랍니다.
구글 폰트 사이트를 통해 기존의 블로그 기본 폰트에서 'Noto Sans KR' 폰트로 변경하였습니다. 기존 폰트에 비해 자간과 굵기가 조정되어 확실히 가독성이 좋아진 느낌이 드네요! CSS 파일 수정을 통해 웹폰트를 적용하였고, 이를 통해 웹디자인에 대해 간단히 다루어보았습니다.