티스토리 초보인지라 기본 스킨으로 석 달간 근근이 잘 버티고 있었는데, 가독성이 떨어지는 폰트는 도무지 두고 볼 수가 없었습니다.
방문자께서도 안구에 과한 부하가 걸리는 폰트로 인해 바로 떠나신 경우가 없지 않았으리라 짐작이 됩니다.
그래서 스킨은 유지하되 전체 폰트만 변경하는 것을 이번에 익혔고, 여러분께 한층 더 간단하게 폰트 변경법을 알려드리고자 합니다.
그리고 조금 더 응용해 여러 폰트를 스킨에 저장해놓고 필요에 따라서 바꿀 수 있는 팁도 알려드리려고 합니다.
전체 절차 요약
- 구글 폰트에서 해당하는 폰트의 HTML, CSS 코드를 확보
- 티스토리 블로그 관리 홈의 스킨 편집에서 HTML, CSS 코드를 반영
1. 폰트 선택
아래 링크에 들어가면 구글에서 제공하는 다양한 한글 폰트들을 만나실 수 있습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
링크 진입 시 아래와 같은 화면이 마음에 드는 폰트를 클릭합니다.
2. 폰트 코드 확보
- 마음에 드는 폰트 선택
- 볼드체 등의 추가 옵션을 선택 [Select this style]
- 우측의 [Embed]를 선택
- HTML과 CSS 코드를 Copy 하여 티스토리 입력
- 입력 방법은 다음 절차에 상세히 설명드립니다.
3. 티스토리 스킨 설정 (폰트 관련 HTML 코드 추가)
[블로그 관리 홈]의 [꾸미기]에서 [스킨 편집]에 진입합니다. 그리고 우측의 [html 편집]으로 진입합니다.
HTML (HyperText Markup Language) 파트와 CSS (Cascading Style Sheets) 파트를 각각 수정해주셔야 하는데요, 구글 폰트에서 확보하신 코드를 copy 하여 붙여 넣으시면 됩니다.
HTML 코드 입력
HTML의 경우 기존 코드의 <head>와 </head> 사이 어느 곳이든 추가로 입력하시면 됩니다.
나눔고딕의 경우 다음과 같은 코드로 구성됩니다.
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
CSS 코드 입력
나눔고딕의 경우 다음과 같은 코드로 구성됩니다. 단, 입력하는 위치가 정해져 있습니다.
font-family: 'Nanum Gothic', sans-serif;입력할 위치를 찾기 위해 편집창에서 [Ctrl + F]를 눌러 [font-family]를 입력하여 찾습니다. 그럼 기존에 적용된 폰트 정보가 나옵니다. 저는 'Ubunto Condensed' 폰트였군요. 뭔가 좌우로 압축되어 납작하고 답답한 느낌이었는데 폰트명을 보니 알 것 같습니다.
이제 해당 코드를 대체할 구글 폰트의 CSS 코드로 바꿔줍니다. 단, 기존 코드도 혹시 모르니 남겨두도록 합니다.
기존의 코드를 저장해두는 방법은 바로 주석 처리입니다. /* ~~~~ */ 이렇게 코드의 양쪽을 처리해주면 주석 처리가 되어 블로그 동작에 영향을 주지 않는 답니다.
새로운 폰트를 적용시키기 위해 기존의 코드를 통째로 복제하신 뒤 구글에서 가져온 CSS 코드로 [font-family ~~] 부분만 바꿔서 넣으면 됩니다.
다음과 같이 기존의 코드는 주석 처리했고, 나눔고딕에 해당하는 CSS 코드를 추가하였습니다.
이렇게 주석 처리를 해놓고 작동할 코드만 살려두면, 기분에 따라 폰트를 변경하는 것도 가능하겠네요.
이상입니다.
'잡학사전 > 블로그 가이드' 카테고리의 다른 글
| 블로그 가이드 - 스킨이 반은 먹고 들어 감 (미넴 스킨) (2) | 2021.07.18 |
|---|---|
| 티스토리 구글 애드센스(AdSense) 승인 조건 (3) | 2020.09.01 |
| 티스토리 구글 애드센스(AdSense) 코로나 ㅠ_ㅠ (0) | 2020.06.28 |
| 티스토리 애드핏 광고 설정 (스크립트 생성, 입력, 광고 정렬) (1) | 2020.06.21 |
| 카카오 애드핏 (AdFit) 승인 조건 (0) | 2020.06.15 |
댓글