tistory 반응형 square 스킨 본고딕(Noto Sans)폰트 변경

tistory를 사용하면서 본문 내용 폰트가 너무 작아서 처음부터 변경을 하려고 생각만 하고 있다가

오랜만에 검색을 해보았지만 나오는 설명들이 나하고는 맞지가 않아 하는 수 없이

시간을 내서 직접 작업을 해보았습니다.

 

사용자 마다 스킨이 다를 텐데 저의 경우는 반응형 Square를 사용하고 있습니다.

폰트는 다들 나눔 고딕을 많이 사용하는 것 같은데 검색을 하다 보니 본고딕(Noto Sans)이

괜찮아 보여서 이것으로 선택을 하였습니다.

https://www.google.com/get/noto/#sans-kore

이곳에 가면 글씨의 원본을 볼 수 있습니다.

하단에는 캡쳐를 해왔는데 이미지가 작아서 별로인 것 같고 직접 가서 보시길 추천 합니다.

폰트는 다운로드를 받아서 설치를 하려고 했는데 생각보다 파일이 너무 크더군요.

요즘에 링크로도 해결이 되는데 굳이 다운받고 업로드 하기가 귀찮아 그냥 링크 방식으로 했습니다.

자. 그럼 작업을 시작 합니다.

 

먼저 로그인을 하고 관리자 페이지 좌측 메뉴에서 [스킨 편집]을 선택 하면

우측에 [html 편집] 버튼이 보입니다.

[html 편집] 버튼을 누르면 화면이 바뀌면서 [HTML | CSS | 파일업로드] 가 나타 납니다.

 

여기서는 CSS를 선택 합니다.

아래 그림을 보고 저와 내용이 다르면 더 이상 이 글을 읽을 필요가 없습니다.

저와 css 구조가 달라서 적용이 안될 수 있습니다.

먼저 사용하지 않을 폰트는 주석처리를 하고 신규로 추가를 했습니다.

/*@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);*/

/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

그리고 font-size:를 키우고 font-family:에 폰트를 추가 해주고 사이트를 새로고침 했는데

영향이 없습니다.

textarea { font-size: 15px; font-family: 'Noto Sans KR', sans-serif; line-height: 200%; }

그래서 모든 font-family: 를 찾아서 수정하고 별 방법을 다 했는데 저하고는 하나도 맞지가 않더군요.

결국 div와 span이 좌측 메뉴 구조와 내용에 영향을 주는 tag인걸 찾아내서

그냥 아래처럼 span, div를 추가하는 것으로 마무리를 했습니다.

이제는 글씨도 좀 커지고 제가 보기에는 만족 스럽습니다.

그럼 된거죠.

- copy coding -