티스토리의 폰트 변경하는 방법

tistory 블로그 전체 사이트 표시 글자체 변경 방법

'JetBrains Mono' , 'D2Coding' 코딩 font 적용하기
D2Coding 폰트의 영문자가 폭이 좁고, Bold 체가 약해서 영문은 'JetBrains Mono'로 대체하는 설정

 

//-----------------------------------------------------------------------------
* D2Coding woff2 폰트 파일 업로드

관리자 메뉴 -> 스킨 편집 -> html 편집 -> 파일업로드

D2Coding.woff2.7z

2.92MB

//-----------------------------------------------------------------------------
* CSS 편집

관리자 메뉴 -> 스킨 편집 -> html 편집 -> CSS

//------------------------------------

맨 위에 추가

@font-face {
  font-family: D2Coding;
  font-style: normal;
  font-weight: 400;
  src: url('images/D2Coding.woff2') format('woff2');
}
@font-face {
  font-family: D2Coding;
  font-style: normal;
  font-weight: 700;
  src: url('images/D2CodingBold.woff2') format('woff2');
}
/* ----------------------------------------------------------------------------- */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* ----------------------------------------------------------------------------- */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium-Italic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold-Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold-Italic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------------------------- */
찾아서 font-family 맨 앞에 추가

body{
...
font-family:  'JetBrains Mono', D2Coding, 'D2 coding', Verdana, arial, helvetica,  맑은 고딕,Malgun Gothic, 나눔고딕,NanumGothic,sans-serif;
...
}

.article {
...
font-family: 'JetBrains Mono', D2Coding, 'D2 coding', 맑은 고딕,Malgun Gothic, 나눔고딕,NanumGothic;
...
}

 

//-------------------------------------
맨 아래에 추가

* , html, body, div, p, span, body p , body div, .article 
, .hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type
, code, pre, pre code span, code span {
font-family: 'JetBrains Mono', D2Coding, 'D2 coding', 맑은 고딕, Malgun Gothic, 나눔고딕, NanumGothic, Verdana, arial, helvetica, sans-serif;
}

.article b {
font-size : 110% !important;
font-weight: 800 !important; 
}