본문 바로가기

IT/티스토리

[티스토리] 티스토리 코드블럭 폰트 변경하기


트로

티스토리 코드블럭의
폰트가 너무 딱딱해보여서 변경하기로 했습니다.

현재 티스토리의 '본고딕 R'은, font-family : "Noto Sans Demilight", "Noto Sans KR"로 정의되어 있는 것을 알 수 있습니다.

다른 폰트를 하고 싶다면 맨 아래에 참조한 구글 폰트(Google Fonts)에서 찾아보면 됩니다.

 

해결 방법

1) 티스토리 관리 > 스킨편집에 들어갑니다.

 

2) html편집을 누릅니다.

3) html의 CSS를 클릭합니다.

4) Ctrl + F로 code를 찾습니다.

'code'로 검색하면 두가지가 나옵니다. 

아래와 같이 '.entry-content pre code.hljs' 를 찾아야합니다.

변경할 코드는 다음과 같습니다.

'.entry-content pre code.hljs' 를 찾아서 

font-family : "Noto Sans Demilight", "Noto Sans KR"; 를 추가해주면 됩니다.

.entry-content pre code.hljs {
	padding: 20px;
	font-family: '원하는 폰트의 이름';
}

 

혹시 다른 폰트를 포함시키고 싶다면, HTML부분에서 <head>와 </head> 사이에 아래와 같이 생겨먹은 애를 추가해야 합니다.

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">

 

<script> 추가후, font-family 에 원하는 폰트의 이름을 작성하면 됩니다.

.entry-content pre code.hljs {
	padding: 20px;
	font-family: '원하는 폰트의 이름';
}

 

추가) font-family는 Google Fonts에 아래와 같이 나타나있습니다. (NotoSans KR 예시)

 

궁금한 점이 있으신 분은 아래 댓글에 물어봐주세요 :) 

감사합니다.

 

다른 폰트를 원한다면 구글 폰트 바로가기

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com