티스토리 반응형스킨#2 폰트 방랑기

Tistory 블로그를 새로 시작하면서, 가장 무난하고 깔끔해 보이는 반응형 스킨 #2를 선택하게 되었다. 스킨을 설치하고 이것 저것 최적화를 하다가 괜히 폰트를 한번 바꿔볼까라는 생각을 한게 이 사단의 출발점이 되고 말았다. 웹디자인에 대해 아는 지식이 거의 없는 편이라 이것저것 시행착오를 거치면서 여러가지 폰트를 적용해 본 과정을 정리해보려 한다. 

비교 폰트

---

 

폰트 적용 방법

---

일반적으로 티스토리 스킨에 폰트를 적용하는 방법으로는 크게 1)웹폰트를 사용하는 방법과 2)블로그에 직접 해당 폰트를 올리는 두 가지 방법이 있다. 이 밖에도 CSS의 font-family만을 변경하는 방법이 있으나 이는 블로그 방문자에게 해당 폰트가 설치되어 있지 않으면 제대로 보이지 않는 단점이 있다.

여기서는 편의를 위해 1)웹폰트를 사용하는 방법의 예시로 나눔바른고딕 폰트를 사용할 것이며 나머지 폰트들의 적용방법은 이와 동일하다. 

실제 적용 예시

---

a) 먼저 CSS 파일의 상단에 나눔바른고딕 폰트를 지정해 준다.( 아래 그림 2번째 줄)

@import url(https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css);

b) CSS 탭에서 CTRL+F 를 눌러 font-family를 찾은 후, 아래 그림의 13번째 줄과 같이 'Nanum Barun Gothic'을 제일 앞에 추가한다. 원래는 CSS 파일 안의 모든 font-family 부분을 수정해 줘야 하는데 반응형 스킨 #2에서 font-family는 저기 한 곳만 수정해 주면 된다.(아래 그림 13번째 줄)

c) a, b 과정을 거치고 나면 스킨에 적용이 되어야 하는데, 실제로는 폰트가 아직 적용되지 않는다. 그 이유는 나중에 설명하기로 하고 우선 CSS 파일의 적당한 곳에 다음을 추가해 준다.(아래 그림 32번째 줄)

.area_view * {font-family:'Nanum Barun Gothic' !important;}

이제 저장을 하고 나오면 폰트가 나눔바른고딕으로 변경되어 있다.

반응형스킨 #2 의 폰트 구조

---

a, b 과정을 거쳤는데도 폰트가 변경되지 않은 것은 반응형스킨#2에서 폰트 파일을 읽어오는 구조가 다르기 때문이다. 이 스킨에서는 HTML파일의 아래 구문을 통해 서버에 저장된 font.css를 읽어오도록 되어 있기 때문에 CSS파일에서 다른 폰트를 지정해줘도 제대로 작동하지 못하는 것이다.

<link rel="stylesheet" href="./images/font.css">

따라서, 실제 적용 예시의 C항처럼 폰트를 강제 지정하거나, HTML 파일에서 font.css를 적용한 부분을 찾아 주석처리를 해주어야 한다. (아래 그림 23번째 줄을 /*<link rel="stylesheet" href="./images/font.css">*/ 로 바꿔주면 주석처리가 된다)

그 밖의 폰트 적용법

---

다른 폰트를 적용하기 위해서는 임포트 할 주소와 font-family에 넣어줄 폰트명만 알고 있다면 적용 방법은 동일하다.

나눔고딕 : @import url(http://font.googleapis.com/earlyaccess/nanumgothic.css); / 'Nanum Gothic'

본고딕 : @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); / 'Noto Sans KR'

나눔스퀘어 : @import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css); / 'Nanum Square'

스포카 한 산스 : 반응형스킨#2의 디폴트 글꼴로 지정되어 있으므로 별도로 추가할 것 없이 없다.

이상으로 티스토리 반응형 스킨 #2에서 여러가지 폰트를 적용하는 방법을 알아보았다. 위에서 적용한 웹폰트를 사용하는 방법이 가장 일반적이고 편한 방법이긴 하지만 로딩속도를 감안한다면 아무래도 용량이 마음에 걸릴 수 밖에 없다. 따라서 가장 용량이 작은 나눔스퀘어와 스포카 한 산스가 최종 후보로 올라오게 되었다. 개인적으로는 나눔스퀘어 폰트가 가장 깔끔하고 보기에 좋았지만, 표현할 수 없는 글자가 있다는 한계를 극복하지 못해 결국 최종적으로 스포카 한 산스 폰트를 사용하기로 결정하였다. 그런데 티스토리 반응형스킨#2에서는 스포카 한 산스 폰트가 기본적으로 지정이 되어 있기 때문에 결론적으로 몇 일동안 헛수고를 한 셈이 되고 말았다 ^^;

2.27일 추가) 폰트를 '맑은 고딕'으로 임시 변경하였다. 

참고 링크

---

• 한글 웹폰트 글꼴 보기집 : 다양한 한글 웹폰트를 볼 수 있으며, 해당 글꼴을 클릭하면 자세한 정보와 함께 미리 써보기를 통한 글꼴 체험을 할 수 있다.

• 웹폰트 사용하기 : 웹폰트에 관한 거의 모든 것이 정리되어 있는 곳

• 스포카 한 산스 홈페이지