[티스토리] 블로그 폰트 변경하기
블로그 가독성을 위해 가장 중요한 것 중 하나는 폰트이다.
오늘은 폰트를 변경한 방법을 공유하고자 한다.
스킨 편집에 들어가기
우선 폰트를 변경하기 위해 스킨 편집에 들어가야 한다.
스킨 편집은 블로그 관리의 꾸미기 탭에 있다.
(블로그 관리는 H키를 눌러 홈에 가서 관리 버튼를 눌러 쉽게 진입할 수 있다.)
스킨 편집에 들어가면 우상단에 html 편집 버튼이 있다.
해당 버튼을 눌러주고, CSS 탭으로 이동하면 된다.
CSS 편집하기
폰트 임포트 하기
우선 사용하고자 하는 폰트를 임포트해야 한다.
폰트 사이트(눈누)에 접속하면, 많은 폰트들이 있다.
- 눈누 바로가기: https://noonnu.cc/font_page/pick
폰트를 보다 보면 이렇게 우측에 '웹 폰트로 사용'할 수 있는 코드를 제공하는 경우가 있다.
저기에 있는 @font-face 내용을 body로 시작하는 코드 위쪽 아무 곳에나 붙여주면 된다.
나는 다음과 같이 폰트를 다운로드 받았다.
- 상단의 블로그 제목: 베이글팻
- 본문: 프리텐다드
- 코드블록: D2Coding
(참고로 티스토리에서 기본으로 제공하는 블로그의 경우, 이미 깔끔한 폰트들로 구성되어 있지만
나는 유독 본문만 맑은 고딕으로 나와서 해당 부분을 바꾸고자 했다.)
폰트 적용
다운로드 받은 이후에는 font-family 로 검색하여 해당 부분을 수정해주면 된다.
(임포트한 폰트의 font-family 이름을 가져다 쓰면 된다.)
대충 보면 이해할 수 있지만 내가 수정한 부분들의 코드를 첨부하도록 하겠다.
참고로 기본 설정에서 폰트 사이즈 등은 별도로 건드리지 않았다.
블로그 제목 폰트 변경하기
#header 라고 되어 있는 부분을 수정하면 된다.
#header h1 {
padding: 23px 0;
font-family: BagelFatOne-Regular;
font-weight: 800;
font-size: 1.75em;
line-height: 32px;
letter-spacing: -0.2px;
color: #333;
}
블로그 본문 폰트 변경하기
#article-view 부분을 변경해주면 된다.
#article-view {
margin: 0;
padding: 20px 20px 50px;
word-wrap: break-word;
color: #333;
min-height: 370px;
font-family: -apple-system, BlinkMacSystemFont, Pretendard-Regular, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0;
}
이렇게 여러 폰트가 나열되어 있는 경우는, 앞에 오는 것이 우선순위가 높게 적용된다고 한다.
사용하지 않는 것들은 지워도 되지만 나는 혹시 몰라 남겨두었다.
참고로! 티스토리 기본 스킨에서 이미 Pretendard-Regular 를 제공하고 있었는데,
왜인지 적용이 되지 않아 맨 앞으로 올렸다.
따옴표의 경우 폰트 이름에 띄어쓰기가 있을 경우 넣는 것이라고 한다.
코드블록 폰트 변경하기
#article-view pre code.hljs 부분 변경하기
/* 코드 블럭 */
#article-view pre code.hljs {
font-size: 14px;
padding: 20px;
font-family: D2Coding, SF Mono, Menlo, Consolas, Monaco, monospace;
border: solid 1px #ebebeb;
line-height: 1.71;
overflow: auto;
}
변경한 폰트 적용하기
좌측의 뷰를 통해 미리보기를 할 수 있다.
우선 미리보기 버튼을 눌러 작성한 폰트를 적용해보고,
좌상단의 드롭다운 메뉴에서 볼 화면을 선택할 수 있다.
중앙에 있는 버튼들로 플랫폼별 미리보기를 할 수도 있다.
코드 편집기 우상단의 적용 버튼을 눌러 적용할 수 있다.