[Tistory] 블로그 전체 글꼴, 코드만 글꼴 따로 설정하는 법

개발 블로그를 작성하다보니 포스팅에 코드 박스가 포함될때가 많습니다. 티스토리 블로그는 html과 css를 편집할 수 있어 원하는 폰트를 적용할 수 있습니다. 그런데 막상 코드 박스에 글꼴은 적용이 안될 때가 있고, 원하는 한글 폰트를 설정하면 영어의  l, i, L, I 의 구분이 어려워 코딩 글꼴로 적절하지 않을 수 있습니다. 그래서 코드 박스에만 다른 폰트를 적용하는 방법을 포스팅 해봅니당 

 

우선은 블로그 전체 폰트 변경방법입니당

 

https://noonnu.cc/font_page/92

눈누

저는 눈누라는 사이트를 주로 이용합니다! 공식적으로 사용가능한 예쁜 폰트가 많이 있어요! 그래도 사용하기 전에 꼭 라이센스 확인하기!!

원하는 폰트를 선택하면 오른쪽 상단에 <웹폰트로 사용> 섹션이 있습니다. @font-face를 복사해 주세요

 

그 후 티스토리 블로그의 설정화면에 들어가서 "스킨 편집" 메뉴를 눌러주세요

오른쪽 상단에서 html 편집 버튼을 눌러줍니다. 그러면 html과 css 등을 편집할 수 있는 에디터가 나옵니다

CSS 섹션을 누르고 복사해 온 font-face를 붙여넣어 주세요! 전체적으로 적용할 폰트와 코딩용 폰트가 따로 있다면 두 개 모두 복사해서 쭉 붙여 넣기 해주시면 됩니다. 그 후 font-family의 값을 복사합니다. 위 사진에서는 Devemayo_gothic이 되겠죠??

body {
    font-family: 'Dovemayo_gothic', 'Nanum Gothic Coding', 'Noto Sans KR', Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

컨트롤 + F 혹은 맥에서는 커멘드 + F를 눌러서 body를 찾아 줍니다. 그리고 body의 font-family에 복사해 둔 폰트 이름을 추가 하시면 블로그 전체에 폰트가 적용됩니다!

기존에 있는 것들을 지우지 않아도 되고 맨 앞에 추가해 주시면 됩니다. 여러개 있는 이유는 위 코드에서 Devemayo_gothic 이 없다면 그 다음 적혀 있는 Nanum Gothic Coding을 사용하게 된다는 뜻입니다. 

 

이제 코드 박스만 폰트 변경하는 방법이에요

포스팅에 포함되어 있는 코드 박스의 클래스명을 보면 hljs 입니다! 이 값을 바꾸면 되겠군요 히히

/* --- 코드박스 --- */
.hljs{
    font-family: "원하는 폰트 이름", "맑은 고딕", serif;
}

CSS 파일 맨 하단에 추가해 주시고 복사해 둔 폰트 이름을 붙여 넣어주시면 되겠습니다

그러면 이렇게 각각 원하는 폰트로 설정해 줄 수 있습니다! 적용하고 싶은 한글 폰트가 코드에 사용하기 적합하지 않아서 고민했는데 역시 코드는 코딩용 폰트를 적용하는게 이쁘네요!!