티스토리 블로그 폰트 변경
블로그의 체류시간을 늘리기 위해서는 가독성이 좋아야 하고, 가독성을 높이기 위해서는 폰트가 깔끔해야한다.
이번 시간에는 티스토리에서 흔히 많이 사용하는 나눔고딕 대신, 본고딕(Noto sans CJK KR)로 변경하는 방법에 대해 알아보겠다.
시작하기에 앞서
인터넷에 있는 폰트 변경 정보들을 그대로 따라 했음에도 본고딕 폰트를 완벽히 적용시키는데 수 시간이 소요되었다. 그 이유는 인터넷에 주로 올라와 있던 웹폰트 적용 방식이 먹히지 않았기 때문인데, 원인과 해결 방법을 알게 되어 따로 이 글을 작성하게 되었다.
필자도 잘못 알았던 부분이라 혹시나해서 이야기 하는데, 만약 자신이 웹폰트 방식으로 본고딕 폰트를 적용 시켰다면 모바일에서도 제대로 나타나는지 확인 하도록 하자. 필자가 확인 했을때는 PC에서는 제대로 보이지만 모바일에서는 적용이 되지 않은 상태였고, 이상해서 다른 PC로 확인해보니 역시나 거기서도 적용이 되지 않았었다.
원인은 웹폰트를 끌어다 쓸 경우 방문자의 PC나 핸드폰에 본고딕 폰트가 설치되어 있어야 적용된다는 사실 때문이었는데, 이는 아래에서 설명하는 파일을 업로드 하는 방식으로 해결이 가능 하다.
본고딕(Noto Sans CJK KR)
위 - 나눔고딕 / 아래 - 본고딕
티스토리에서는 주로 나눔고딕을 사용 하는 경우가 많은데, 얼마 전 브런치에서 글을 작성하던 중 폰트가 깔끔하다고 생각을 해서 찾아 보았더니 '본고딕'이라는 글꼴이었다.
본고딕은 구글과 어도비의 합작품으로 다양한 언어와 굵기도 7가지나 지원을 하지만, 그 만큼 용량이 커서 티스토리에서 사용하기에는 다소 무겁다는 단점이 있다보니 주로 웹폰트로 끌어다 쓰는 방법을 많이 이용 했는데, 위에서 이야기했듯 저 방법은 오류가 있었다. (이 부분은 단순히 Fastboot 스킨의 오류일지도 모른다.)
하지만 결국 간소화된 파일을 찾아서 해결할 수 있게 되었으니, 혹시 본고딕 폰트 적용을 못하고 있었다면 참고하길 바란다.
Noto Sans CJK KR 적용방법
본고딕(notosanskr) eot,woff,woff2.zip위의 파일을 받아서 압축을 풀고 티스토리 스킨편집창에 들어간다.
상단 오른쪽 끝에 있는 '파일 업로드'에서 아까 압축을 풀었던 파일들을 추가 하면 되는데, 'notokr-regular.eot, woff, woff2' 이 세 개를 모두 업로드 해준 뒤 저장을 하고 CSS로 들어간다.
본고딕 텍스트파일.txt'charset'위에 텍스트에 적혀 있는 'font-face' 부분 전체를 복사해서 붙여넣어주면 되는데, 만약 기존에 다른 폰트를 적용했던게 남아 있다면 기존에 있던 폰트 페이스를 지우고 텍스트 파일에 있는 걸 넣으면 된다.
그리고 사진 27번 항목에 있는 것 처럼 'font-famliy'를 찾아서 파일에 있는 'notokrR, sans-setif'를 넣어 주면 된다. 이게 앞에 있는 글꼴이 우선 적용되는 방식이니 뒤에 있는 것도 지워줘도 상관 없다.
같이 보면 좋은 글
마무리
이상하게 인터넷에 이와 관련된 정보가 별로 없다보니 적용하는데 애를 먹었는데, 결과적으로 성공 했고 이러한 경우가 있다는 것 을 알았으니 새로운 지식을 얻은 것 에 만족해야겠다. 추후에 원하는 폰트를 블로그에 업로드해서 사용할 수 있도록 변환하는 방법에 대해서도 작성해 보도록 할 예정인데, 점점 잡지식이 늘고 있는 것 같다는 생각이 든다. (하하하)
아 덧붙여서 기존에 나눔고딕 등의 글꼴 파일을 업로드했던 상황이라면 지워주는 게 좋은데, 블로그의 불필요한 용량을 최대한 줄이는게 모바일 최적화에 있어서 중요하기 때문이다.
-다른정보-