[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

highlight.js에 쓰이는 폰트를 변경해보자.

제목 라벨과 Copy버튼을 넣고 가만히 보고 있었는데 뭔가 자꾸 어색한 느낌이 들어서 뭐 때문인지 몰랐다가 Visual Studio를 켜고난뒤에 알았다. 폰트가 코딩때 사용하던 폰트가 아니여서 다른 폰트로 소스코드를 보니 뭔가 어색한 느낌이 들었던것이다.

필자는 D2 Coding 폰트를 사용하고 있어서 해당 폰트를 올려서 적용하도록 해보겠다.

D2 Coding 폰트 다운로드

GitHub - naver/d2codingfont: D2 Coding 글꼴

필자도 새로운 버전이 있나 오랜만에 들어가봤는데 가지고 있던 글꼴이 최신폰트였다.

뭐 그만큼 완성도가 높았으니.... 아무튼 폰트를 다운받고 압축을 풀어주자.

(그냥 뭔가 최신버전이 없으니 서운했던거 같다.. ㅋㅋ)

3개의 폴더중 D2Coding에 있는 글꼴들만 사용할것이다.

해당 폴더에 들어가면 3개의 폰트파일이 있는데 모두 티스토리에 업로드 해주자.

CSS 추가

파일을 모두 업로드 했으면 아래 CSS를 추가 해주자.

@font-face{
  font-family:'D2Coding';
  src:url('./images/D2Coding-Ver1.3.2-20180524.ttc') ;
  src:url('./images/D2Coding-Ver1.3.2-20180524.ttf') format('truetype');;
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family:'D2Coding';
  src:url('./images/D2CodingBold-Ver1.3.2-20180524.ttf') format('truetype');;
  font-weight: bold;
  font-style: normal;
}

이걸로 폰트추가가 마무리 되었다.

/* 코드 블럭 */
  #article-view pre code.hljs {
    font-size: 13px;
    padding: 10px;
    font-family: D2Coding;
    line-height: 1.71;
    overflow: auto;
    white-space: pre-wrap; 
    word-break: break-word;
  }

마지막으로 highlight.js의 폰트를 D2Coding으로 변경해주면 끝난다.

관련글

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

[Blog] highlight.js 설치하기(티스토리에 설치하기)

[Blog] highlight.js 사용하기(기능확인 및 HTML로 사용하기)

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가)

[Blog] 티스토리 글꼴 바꾸기 (네이버 무료 배포 글꼴 적용하기)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome