티스토리, 설치형 블로그에서 구글 웹폰트가 적용/동작 하지 않을 때 해결 방법

어느 날부터인가 티스토리에 적용한 웹폰트가 깨져서 기본 폰트인 고딕 폰트가 적용된 상태로 나오기 시작했습니다. 분명 미리보기에서는 원래 지정된 폰트대로 예쁘게 표시되었는데, 

이 발행 버튼만 누르면 웹폰트가 다 깨져서 저장이 되어 노출이 되었습니다. 아무 것도 따로 만진 게 없는데 이상하게 적용이 되니 귀신이 곡 할 노릇이었습니다. 그래서 하루 날 잡고 고쳐보자! 하고 사투 끝에 해결 방법을 알아냈습니다.

원인

티스토리에서 드디어 https를 적용 하였습니다. 모든 주소가 https로 바뀌었으며 티스토리 스킨의 CSS도 수정이 필요합니다. 기존에 구글 웹폰트 CSS import URL은 http 로 되어 있습니다. https로 연결된 상태에서 http로 연결하여 CSS를 받아오려고 하니 아래와 같은 오류가 나는 것입니다.

※ 아래의 해결 방법은 티스토리 뿐만 아니라 모든 웹사이트에 적용이 가능합니다. 구글 웹폰트가 갑자기 로딩이 안된다면 꼭 CSS파일의 @import 부분을 확인해 보세요.

해결방법

1. 구글 웹폰트를 불러오는 @import 가 있는 css 파일을 엽니다. 티스토리의 경우 블로그 관리 페이지에서 스킨 편집을 누르면 오른쪽 상단에 html 편집 버튼이 있습니다.
2. @import 뒤에는 십중팔구 웹폰트를 불러오기 위한 url(...)이 있습니다. 그 안에 있는 주소를 확인합니다.
3. 미리보기 시에는 웹폰트가 잘 적용되다가 저장만 하면 웹폰트가 깨져서 나올 경우 주소가 http로 시작할 가능성이 큽니다. http를 https 로 변경해줍니다.
4. 우측 상단의 적용 버튼을 눌러줍니다.
5. 블로그 포스팅을 열고 새로고침을 눌러줍니다.

어때요? 참 쉽죠? 원인은 바로 이것이었습니다.

F12를 누르고 Console을 보니 에러 메세지가 떠 있었습니다. 블로그 포스팅은 HTTPS를 사용해 로딩이 되고 있는데, 그 안에 있는 CSS 컨텐츠는 HTTP로 웹폰트를 로딩하려다보니 요청이 막혀서 제대로 CSS가 적용되지 않고 있었던 겁니다. 

보시면 포스팅을 아무거나 열어보면 URL이 HTTPS로 시작하는 걸 볼 수 있습니다. 따라서 @import에서 HTTPS를 가져오게 바꿔주면 에러 없이 적용이 가능해집니다. 그렇다면 미리보기에선 왜 웹폰트가 아무런 에러 없이 잘 적용이 되었던 걸까요?

바로 미리보기는 HTTP를 사용하기 때문입니다. 포스팅을 볼 때는 HTTPS를 사용하는 것과 반해 미리보기는 HTTP를 사용하기 때문에 HTTP를 사용해 웹폰트를 불러와도 아무런 문제가 없었던 것입니다. 인터넷에 웹폰트를 사용하기 위해 무료 웹폰트로 검색해보면 @import url(http:// 로 시작하는 게 대부분입니다. 검색해서 그대로 따라했는데 왜 내 티스토리 블로그에서는 예쁘게 적용이 안되지? 하신다면 당황하지 말고 잘 해결해 보세요 ^^