티스토리 기본글꼴을 바꿔도, 휴대폰으로 접속해보면 폰트가 그대로인 이유는 휴대폰에는 해당 폰트가 없기 때문인데요, 이것을 구글 웹폰트를 이용하여, 어떤 기기에서 어떤 브라우저로 접속하든 동일한 폰트가 표시되게끔 해보겠습니다.
먼저 구글 웹폰트 사이트로 이동합니다.
그러면 위와같이 폰트들이 나오는데요, 가장 보편적으로 사용되는 나눔 고딕을 선택해보겠습니다. + 버튼을 눌러줍니다. 여러개도 선택 가능합니다.
그러면 하단에 선택된 폰트가 보입니다. 표시한 부분을 클릭합니다.
첫번째로, 커스터마이즈 란으로 가서
한국어로 사용할 것이니, korean 부분에 체크합니다.
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&subset=korean');
위 문구를 복사 한 뒤, 그 후 티스토리 블로그의 스킨 편집창으로 가서, CSS 구간 아무곳에 붙여넣어줍니다. 저는 추 후 편의성을 위해 /*구글웹폰트*/ 문구를 추가했습니다.
그 후 다시 웹폰트 사이트로 와서, STANDARD 부분을 복사해줍니다.
그 후 HTML 에 HEAD 부분에 넣어주세요. 저는 meta와 link 부분 사이에 아무데나 넣어주었습니다. 여기서도 마찬가지로, <!-- --> 명령어를 사용해 추 후 구분을 쉽게 하였습니다.
그 후 다시 CSS 로 갑니다. (한방에 CSS에서 할 작업을 끝내도 되지만, CSS와 HTML 탭을 왔다 갔다 하는 이유는, 각 작업을 헷갈리지 않게 하기 위해서 입니다.)
Ctrl+f 를 눌러 font-family를 검색해 위와같이 만들어 줍니다. 사용하는 스킨마다 넣는 구간이 다를 수 있습니다. CSS에 없다면 HTML에서 찾아봅니다.
글 본문, 카테고리 외의 부분은 그냥 수정하지 않으시는 것을 추천합니다. 웹폰트 특성상 로딩이 길어질 수 있기 때문입니다. 이렇게 붙여놓고 저장을 누르고 다시 블로그 홈으로 가 제대로 되었는지 확인합니다.
홈 화면은 제대로 된 것 같습니다. 훨씬 깔끔해보입니다. 잘 적용이 되었는지 살펴봅니다.
카테고리 부분도 잘 적용이 되었네요. 이제 폰으로 접속하든, 어디서 접속하든 완벽하게 나눔고딕 글꼴로 표시가 될 것입니다.