티스토리 본문 글자 크기는 CSS 내 Code 수정만으로 변경이 가능했습니다. 그러고나니 욕심이 생겨 글씨체 변경까지 궁금해졌습니다. 정말 검색을 통해 여러 포스팅을 찾아봤지만 초보가 따라하기에 모두 어렵다는 결론만 나왔습니다. 그래서 순서대로 따라하면 적용이 되는 지극히 초보자 입장에서 글을 작성해봅니다.
개인적으로 가독성이 가장 좋다고 생각하는 글씨체가 나눔스퀘어라 적용해봅니다. 나눔스퀘어를 가장 선호하지만 검색 결과 최근 자료는 모두 나눔스퀘어라운드체를 반영하고 있기에 초보자인 저로서는 눈물을 머금고 나눔스퀘어라운드체를 반영할 수 밖에 없었습니다. 나눔글꼴은 종류도 다양합니다.
글자체를 변경하는 순서는 ① 글자체 다운로드 ② 티스토리 내 CSS 적용 ③ 변경 여부 확인 순서로 간단합니다. 말은 쉬운데 초보자인 제가 순서대로 따라해봤지만 여간 어려운게 아닙니다. 그럼 쉽게 쉽게 가봅시다.
나눔스퀘어 글씨체 변경
글자체(나눔스퀘어) 다운로드
글씨체 다운로드는 다양한 곳에서 가능합니다. 하지만 저와 같은 초보께서는 묻지도 따지지도 마시고 아래 주소에서 그냥 다운로드 받도록 합시다.
https://github.com/innks/NanumSquareRound
GitHub - innks/NanumSquareRound: 나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont.
나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont. Contribute to innks/NanumSquareRound development by creating an account on GitHub.
github.com
아래 캡쳐에 보이는 나눔스퀘어 관련 4가지 파일을 다운로드 합니다.
티스토리에 불러오기
1. 티스토리→꾸미기→ 스킨편집 → HTML 편집 → 파일업로드 를 선택합니다. 그리고 다운로드 받은 4개 파일을 업로드 합니다. 파일 업로드는 파일업로드→추가→파일 선택을 하면 자동 업로드 됩니다.
2. HTML편집 → CSS 이동하여 아래 Code를 복사한 후 @charset "utf-8"; 아래에 붙여넣습니다.
@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');
}
3. CSS 내 font-family 를 찾아 기존 글자체를 NanumSquareRoundR 로 변경해줍니다. CSS 내에 font-family가 몇군데 있습니다. Ctrl+F 혹은 스크롤을 내려 찾으시고 수정한 후 적용을 눌러줍니다.
/* Type Selector Reset */
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'NanumSquareRoundR', sans-serif;
font-size: 1em;
line-height: 2.5;
color: #555;
}
input, select, textarea, button {
font-family: 'NanumSquareRoundR', sans-serif;
font-size: 100%;
border-radius: 0;
}
#header h1 {
padding: 23px 0 ;
font-family: 'NanumSquareRoundR';
font-weight: 800;
font-size: 1.75em;
line-height: 32px;
letter-spacing: -0.2px;
color: #333;
}
변경 여부 확인하기
티스토리 메인화면에 가서 새로 고침을 하면 전체 문서가 나눔스퀘어로 적용된 것을 확인하실 수 있습니다. 사실 위와 같이 적용하면 글쓰는 단계부터 바뀌는 줄 알았습니다. 글쓰기 에서는 반영이 안 되니 오해하시면 안 됩니다. 포스팅을 완료해야 보입니다.
글씨체 변경 방법
번외지만 글씨체를 수정하는 방법은 두가지가 있습니다. ① 제공되는 소스를 복사해서 티스토리 내 CSS 편집 창에 그대로 붙여 넣어 적용하는 방법 ② 글씨체를 다운로드 받아서 티스토리에 파일을 추가하고 CSS 편집 창에 코드를 넣어 적용하는 방법 우리는 두번째 방법을 진행중입니다.
첫번째 방법은 따라하면 정말 5분안에 정리가 됩니다만 위 글을 자세히 보시면 제공되는 소스라는 말이 있습니다. 제공되는 소스를 소유한 곳이 문제가 생기면 곤란해집니다. ㅎㅎ 그래서 패스
이상 티스토리에 나눔스퀘어 글씨체를 반영하는 방법에 대해 작성해보았습니다. 저는 아무것도 모르는 상태서 시작해서 이해하고 반영하는데 1시간 넘게 걸렸습니다. 컴퓨터를 어느 정도 아시는 분은 쉽게 할수 있지만 거리가 먼 저 같은 분은 아마도 쉽지 않으실겁니다.
그냥 묻지도 따지지도 마시고 일단은 순서대로 진행해보시고 결과를 확인해 보는겁니다. 이후 관심을 가지고 조금씩 더 공부하시면 될꺼라 봅니다.
티스토리 중수를 향해 우리 모두 나아갑시다.
댓글