[tistory] Tistory Code 폰트 변경

1. 사용되는 폰트 확인

자신의 블러그를 크롬에서 열고 F12로 개발자 도구에서 코드 영역의 스타일을 확인합니다.

code 태그는 code { font-family: monospace; }로 설정된 것을 확인할 수 있습니다.

monospace

2. 사용하고자 하는 폰트 확인
구글 폰트 사이트(https://fonts.google.com/)에서 사용할 폰트를 선택합니다.

저는 코딩을 위한 폰트로 inconsolata를 선택했습니다.

 

3. 설정 내용을 적용

Tistory의 스킨 편집에서 HTML 탭과 CSS 탭을 수정합니다.

관리 > 꾸미기 > 스킨 편집

 

HTML 탭

이하의 코드를 추가합니다.

google font 추가

이하에서는 코드에서 많이 사용되는 "Roboto Mono"와 "incosolata"를 추가했습니다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=inconsolata&display=swap" rel="stylesheet">

CSS 탭

이하의 코드를 추가합니다. CSS 탭을 선택한 상태에서 코드 영역을 클릭하고 Ctrl + F > code로 검색합니다.

원하는 font-family 및 font-size 추가