티스토리 에디터의 기본 폰트 바꾸기

인터넷에 티스토리 폰트 바꾸는법을 치면 폰트를 추가만 하거나, !important 속성으로 하나의 폰트로만 강제설정을 하는데, CSS 설정을 조금 바꿔주면 기본에디터에서도 원하는 폰트를 사용할 수 있습니다.

웹폰트 적용원리

웹폰트는 @font-face 명령어를 사용해 폰트를 불러온뒤 font-family를 이용해 폰트를 지정합니다.

/* 폰트 경로 지정 */
@font-face{
   font-family: 지정할 폰트 이름;
   src: 폰트 경로; /* 경로를 여러개 쓸경우 앞에서부터 순서대로 불러옴(불러오기 실패시 다음 경로) */
   font-weight: <weight>; /* 필수X */
   font-style: <style>; /* 필수X */
}
   
   
/* 폰트 지정 */
body{
   font-family:'폰트명', '폰트명'; /* 첫번째부터 불러오며 미지원 언어나 불러오기 실패시 차례대로 불러옴 */
}

에디터 폰트 바꾸기

위에 @font-face의 작동방식이 있는데, 여기서 작은 꼼수를 부리면 기본 에디터에서 원하는 폰트를 사용할수 있습니다. 티스토리 에디터에서 폰트를 바꾸고 html탭으로 변경하면 폰트가 지정되어있는걸 확인할 수 있습니다.

예를 들어, 본명조의 경우  <span style="font-family: 'Noto Serif KR';">로  되어있습니다.

 

그런데 여기서 원하는 폰트를 불러와서 그 이름을 Noto Serif KR로 지정한다면 실제 보이는건 원하는 폰트로 보이게 됩니다.

 

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

제가 블로그에서 사용하고있는 폰트는 원래 위에처럼 지정합니다.

하지만, 아래처럼 font-family: 'Noto Serif KR';로 바꿔준뒤 CSS설정에 들어가 추가합니다.

@font-face {
    font-family: 'Noto Serif KR';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

이제 에디터에서 글을 쓸때 폰트를 본명조로 설정하고 글을 올리면 볼때는 넥슨 고딕체로 보이게 됩니다.

나중에 다른 폰트로 바꾸려면 src: url()부분만 수정해주면 됩니다.

 

위에 방식으로 폰트를 적용한 본문

@import(url)방식으로 폰트를 불러오는 경우에도 url를 들어가보면 @font-face를 모아둔 CSS파일이기에 Ctrl + S 버튼으로 CSS파일을 저장한뒤 원래 폰트명을 Noto Serif KR로 모두 바꾸고 바꾼 파일을 스킨편집-파일업로드에 업로드한뒤, @import(업로드한 파일 주소)를 CSS에 추가해주면 위에와 동일하게 가능합니다.