티스토리 화면의 오른쪽 상단에는 다음과 같은 툴바가 있습니다. 다음과 티스토리 메인화면으로 바로가는 버튼과 자신의 블로그를 관리할수도 있고 링크를 추가 하는 버튼과 심심하면 누르게 되는 렌덤 버튼이 존재하죠.
스킨에 웹폰트를 적용해도 이 부분은 바뀌지 않습니다. 사실 스킨 치환자에 저것을 설정하는 부분도 없고요. 저것을 보기 싫어서 설정에서 색상을 투명처리 시키거나 아예 CSS 오버라이드로 꺼버리시는 분들이 종종 있습니다. 그렇지만 그렇게하면 저같이 심심할때 랜덤 블로그 룰랫 돌리는 경우에는 굉장히 귀찮아 집니다. (그래서 되도록이면 툴바는 씁시다 -0-)
하지만 툴바는 끼고 살아야겠고 폰트는 못 나서 보기 싫으시다고요? 그래서 제가 삽질을해서 폰트 변경법을 알아냈습니다. 뭐 대단한건 아니지만 모르시는 분들에게 작게나마 팁이 되길 바라며 강좌를 올려봅니다.
티스토리의 툴바 class는 .tistorytoolbar 입니다. 이 class를 가지고 css를 작성하신뒤 뒤에 !important만 붙여주면 됩니다. 참 쉽죠?
제가 사용하고 있는 견본 태그를 올려드리겠습니다.
.tistorytoolbar, .tt_menubar_link_tit {
font-family: 'oswald', 맑은 고딕, Apple SD 산돌고딕 Neo, 나눔고딕 !important;
padding-top: 2px !important;
letter-spacing: 0px !important;
display: inline !important;
}
자신이 쓰고 싶은 폰트 이름을 font-family 뒤에 붙여 넣으시면 됩니다. padding-top,display 항목은 폰트를 강제로 변경할시에 적용 취소가 됩니다. 그래서 꼭 넣어주시기 바랍니다.
letter-spacing 같은 경우에는 웹폰트의 너비에 따라 설정해주시면 됩니다. 기본값은 2px이지만 제가 쓰는 Oswald의 가로폭이 좁아서 0px로 했을때 가장 보기가 좋았습니다.
tistorytoolbar만 적용하면 앞에 다음이나 티스토리 메인 페이지 링크는 바뀌지 않습니다. 그래서 추가 해줘야 되는 class가 바로 .tt_menubar_link_tit 입니다. 이 class 추가시에 비로소 완벽하게 폰트 적용이 끝납니다.
