[티스토리] 코드블럭 폰트 변경 10분컷 가이드

이전단계 (필수x)

색상은 화려해졌지만
여전히 가독성이 떨어지는 코드블럭의 폰트를 바꿔보자

폰트 적용 전

폰트 적용 후

나는 code로 검색해 제일 먼저 나오는
Source Code Pro를 사용하기로 했다.

일반적으로 400~500이 적당한 것 같다.

나는 약간 굵은 500을 선택했다.
원하는 굵기를 골라 select를 눌러준다.

오른쪽 위의 View 아이콘을 누른다.

방금 셀렉트한 폰트를 확인하고,
아래 링크를 복사해준다.

티스토리 스킨 편집 > html 편집 으로 간다.

방금 복사한 링크를 <head>와 </head> 사이에 넣어준다.

마지막으로 아래 코드에서 한국어 부분을 고쳐
css 가장 밑에 추가해주면 된다.

/* code block style */
pre code {
	font-family: '폰트이름', monospace !important;
	font-size: 폰트사이즈px;
	line-height: 줄간격;
}

예시

/* code block style */
pre code {
	font-family: 'Source Code Pro', monospace !important;
	font-size: 14px;
	line-height: 1.6;
}

css에 추가해주자

+) 폰트 이름 확인하는 방법

html 링크 아래의
css 코드를 확인하자

Windows 윈도우 기본기능으로 화면녹화 하기 (설치x) (0)	2023.02.26
[티스토리] 블로그 폰트 변경하는 방법 (2. 다운로드해서 적용하기) (0)	2023.02.07
[티스토리] 블로그 폰트 변경하는 방법 (1. 웹폰트 이용하기) (0)	2023.01.30
[티스토리] 코드블럭 색상테마 10분컷 가이드 (테마 200+가지 / 다운로드 X) (0)	2023.01.23
[티스토리] 모바일앱 수정 시 내용이 Source로 인식되는 현상 (0)	2023.01.19

Just Dive