구글폰트를 이용한 티스토리 글씨체(글꼴) 스타일 변경 방법
기존에 사용했던 방법은 폰트를 다운받고 해당 폰트 파일을 스킨에 집어넣고 적용하는 방법이라 처음 티스토리를 접하시는 분들은 다소 어려울수도 있겠다는 생각을 하게 되었습니다. 실제로 이번에 책을 구매하시고 실전에 바로 적용하려다가 잘 안되서 문의를 주시는 분들이 계셨습니다. 이대로는 안 되겠다 싶어서 최신버전으로 초간단하게 폰트를 내 맘대로 적용하는 방법에 대해서 작성하려고 합니다.
참고로 폰트는 저작권에 민감합니다. 따라서 절대 무료폰트를 사용해야하며 아무 폰트나 막 사용해서는 안됩니다. 저 같은 경우는 구글에서 제공하는 무료 폰트를 사용하는데 꽤 유용합니다. 여기에서도 이 방법을 토대로 작성할 것입니다. 이 글에서는 티스토리를 막 개설하면 바로 적용되어있는 반응형 기본 스킨 #1에 대해서 수정하는 방법을 기준으로 작성되었습니다. 나머지 스킨들도 여기서 제시하는 방법을 사용하시면 큰 문제없이 글꼴을 변경하실 수 있으실 겁니다.
먼저 구글에서 위와같이 "구글폰트" 라고 검색해 보세요. 그러면 바로 아래에 Google Fonts 라고 하는 웹페이지가 검색이 됩니다. 이쪽으로 들어가세요. 이 페이지에서 바로 들어가시려면 여기를 누르시면 됩니다.
그러면 이렇게 되어있는 웹페이지로 이동하셨을 것입니다. 오른쪽에 보시면 Languages (언어) 부분이 있습니다. 여기에서 언어를 Korean (한국어) 로 선택하시면 왼쪽 미리보기 폰트들이 전부 한국어로 변경됩니다.
저는 나눔고딕 폰트를 적용시켜보겠습니다. Nanum Gothic 폰트를 클릭해서 들어갑니다.
그러면 해당 폰트에 대한 캐릭터 미리보기가 나와있습니다. 오른쪽 상단에 보시면 SELECT THIS FONT 라고 빨간색 글씨가 있습니다. 그곳을 클릭합니다.
그러면 아래쪽에 뭔가 이렇게 표시가 됩니다. 해당 항목을 클릭해서 들어갑니다.
여기서부터 중요합니다. 빨간색 박스친 부분과 파란색 모두를 사용하게 됩니다. 해당 태그들을 모두 메모장에 임시로 붙여넣기 해주세요.
이제 티스토리 관리자 화면으로 넘어옵니다. 꾸미기에서 스킨편집으로 들어갑니다.
html 편집 버튼을 누릅니다.
먼저 html 에서 수정합니다. 아까 빨간색 태그 부분을 저 쯤에 붙여넣기 해주세요. 저기 한글 부분은 신경쓰시지 않으셔도 됩니다. 여러분들께서 확인하실 수 있게 주석으로 표시해둔 것 뿐 입니다. #1 스킨에는 link 관련 태그가 저렇게 두 개 있을텐데, 그 아래에 붙여넣기 해주시면 됩니다. 그리고 꼭 저장을 누르세요.
그리고 CSS로 넘어옵니다. 먼저 이 방법을 사용하면 적용은 되는데, 문제는 이게 모든 글꼴에 대해서 변경하는 부분이라 사용하시는 스킨에 따라서 스킨이 깨지거나 UI의 일부 글씨 위치가 삐뚤어지는 경우가 있습니다. 폰트 스타일에 따라 글꼴 크기도 각각 조금씩 다르기 때문입니다. 이 방법을 먼저 써보시고 스킨이 깨지면 다음의 방법을 추천합니다. 참고로 #1 스킨의 경우는 글씨나 스킨이 깨지지는 않으나 일부 UI의 폰트가 어긋나는 현상이 발생합니다. 아래에 위의 태그를 다시 한 번 써두도록 하겠습니다.
body {font-family: 'Nanum Gothic', sans-serif !important;}
어차피 중요한건 콘텐츠니까 본문에만 적용되면 됩니다. 따라서 body 태그 안쪽에 저렇게 입력해 두세요. 여기에서는 아까 메모장에 복사해둔 파란색 태그 부분을 붙여주시면 됩니다. 그리고 끝에 보시면 !important 라고 되어있는데, 이것도 꼭 붙여주셔야 합니다. 가장 최우선으로 적용하겠다는 뜻 입니다. 여기까지 다 되셨으면 저장을 눌러주세요.
참고사항 : 이렇게 진행한다고해서 글쓰기에서 제공하는 폰트에 나눔고딕이 추가가 되는게 아닙니다. 여기서는 변하는게 없습니다. 글쓰기 모드에서는 적용 안 되고, 글을 다 쓰신 다음 완성되었을 때 자동 적용 됩니다. 미리보기를 눌러서 확인도 가능합니다.
이것이 나눔고딕 적용 전의 티스토리 #1 기본 스킨의 원본 글꼴 모습입니다.
이건 방금 구글폰트를 사용하여 나눔고딕을 적용한 모습 입니다. 확실히 글씨체가 달라졌음을 확인할 수 있습니다. 일부는 적용이 되지 않았을수도 있습니다. 이유는 위에서 말씀드린대로 몽땅 적용하면 스킨이 깨지거나 글씨가 틀어질 수 있기 때문입니다. 가장 안전한건 본문에만 적용시키는 방법입니다. 그러면 무사히 성공하셨기를 빕니다. 끝.
"친절한효자손 취미생활" 을 검색!
