티스토리 font 변경

기존 font 변경하기

가장 간편한 방법은 Google Fonts에서 폰트를 고르는 방법이다.
위 사이트로 접속해서 Korean을 검색 후 해당 폰트 중 마음에 드는 폰트를 사용하면 된다.

현재 Google Fonts에서 제공하는 폰트 중, 블로그의 일반적인 내용을 서술하기에 적합한 폰트는 아래와 같다.

 

본고딕 (기본서체)

제주고딕

제주명조

 

이 이외의 글씨체는 너무 두껍거나, 가독성이 좋지 않아 선택지에서 제외했다.
추가로 따로 웹 상에 풀려있는 두 글씨체도 첨부한다. 

 

나눔바른고딕

나눔고딕

 

손글씨도 몇 가지 적용해봤지만 따로 마음에 쏙 드는 폰트가 없었다.
역시 블로그 포스팅처럼 글을 나열해서 쓸 때는 고딕같이 깔끔한 서체가 좀 더 신뢰감이 가니까.
앞으로 더 끌리는 폰트가 있으면 추가할 수도 있을 것 같지만, 현재로서는 이게 최선으로 보인다.

현재 블로그는 본고딕이 적용되어 있으며, 적용 방식은 아래와 같다.

 

1. 블로그 관리 → 스킨 편집 → html 편집 → CSS로 이동

2. 원하는 폰트의 css url을 import

/* 본고딕 */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/* 제주고딕 */
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);

/* 제주명조 */
@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

/* 나눔바른고딕 */
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css");

/* 나눔고딕 */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap');

/* D2Coding */
@import url("//cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-full.css");

위의 block에서 원하는 폰트의 라인만 복사해서 붙여넣으면 된다.
기존에 import 되어있는 폰트들이 있을 수 있는데, 바로 그 아래 세팅해주는 것이 가장 바람직하다.
만약 기존 코드가 없을 경우, 최대한 위쪽에 붙여넣으면 된다.

3. font 적용

body {
    ...
    /* 본고딕 */
    font-family: 'Noto Sans KR', sans-serif;
    
    /* 제주고딕 */
    font-family: 'Jeju Gothic', sans-serif;
    
    /* 제주명조 */
    font-family: 'Jeju Myeongjo', serif;
    
    /* 나눔바른고딕 */
    font-family: 'NanumBarunGothic', sans-serif;
    
    /* 나눔고딕 */
    font-family: 'Nanum Gothic', sans-serif;
    ...
}

 

가장 먼저 해야 할 것은 body를 찾는 일이다.
아마 ctrl-f를 이용해 font-family를 검색해서 body 안에 있는 font-family를 찾는 것이 가장 빠를 것이다. 
그 후, 위 코드 중 2번에서 import했던 것과 같은 폰트를 font-family 뒤에 입력해주면 된다.

Code용 글씨체 따로 설정하기

나는 원래 코딩할 때 D2-coding 글씨체를 자주 사용하는데, 블로그에서도 코드 블럭의 글씨체를 D2-coding으로 쓰고 싶었다.
D2-coding 폰트의 url은 앞선 css url 코드블럭에 포함되어 있으니 참조할 사람은 스크롤을 올리면 된다.
나는 code block안에 들어가 있는 글에 대해서만 D2-coding 폰트를 적용하고 싶기 때문에 아래와 같은 내용을 css에 추가했다.

pre > code { 
    font-size: 14px;
    font-family: "D2coding" !important;
}

 

import는 무조건 선행되는 부분이니 빠지지 않도록 주의하길 바란다.