본문 바로가기

전체 글 리스트   

Blog

구글 웹 폰트 저장을 통해 IE에서도 동일한 폰트로 보여주기-티스토리

블로그 스킨을 티스토리에서 제공하는 반응형 Poster 스킨으로 변경한 이후 여러 가지가 마음에 들었지만 그중에서 가장 마음에 들었던 부분은 역시 가독성 있는 폰트였습니다. 


구글에서 무료로 제공하는 Noto Sans Kr 폰트는 블로그의 가독성도 높여주고 블로그 자체도 미려하게 보이는 디자인 효과가 있어서 특히 마음에 드는 폰트였습니다. 몇 가지 CSS 수정을 통해서 제가 보기에 가독성이 좋은 본문 폰트 사이즈로 변경을 하고 나서 매우 만족해했었는데 대부분 Chrome 이나 FireFox 브라우저를 쓰던 제가 우연히 IE(Internet Explorer)로 블로그를 접속해 보면서 느낀 점은 "어라 IE만 폰트가 이상하네"였습니다.


아무리 봐도 IE에서는 설정한 Noto Sans Kr 폰트가 아닌 돋움으로 출력되는 폰트에 확인을 해보니 IE9는 eot 방식의 폰트만 지원하고 IE11부터는 woff를 지원한다고 하는데 무엇때문인지 IE11에서도 제대로 출력되지 않았습니다. Edge는 Noto Sans Kr을 제대로 보여줬습니다.


부랴부랴 가장 비슷해 보이는 맑은 고딕을 eot 형태로 티스토리 폴더에 업로드한 다음 두 번째 선택 폰트로 수정하고 IE에서도 맑은 고딕으로 그럭저럭 가독성 있는 모습을 보여 주게 되었는데 그대로 IE만 다른 폰트로 보여 진다는 게 계속 마음 한구석에 찜찜함으로 남았습니다.


웹폰트 사용시 IE만 다른폰트 표기

구글이 제공하는 웹 폰트 중 Noto Sans Kr은 EOT 파일은 더 이상 지원하지 않았으므로 당장은 방법이 없었습니다.


IE를 제외한 모든 브라우저가 아주 동일한 모습은 아니어도 거의 대동소이한 블로그 레이아웃을 보여주는데 아직도 IE 사용이 많은 한국에서 블로그를 운영하면서 최적의 가독성 있는 모습을 보여주지 못하는 부분이 마음에 걸렸습니다.


관련 글 링크

티스토리 블로그 Poster 스킨, PC와 모바일 폰트 사이즈 다르게 변경



브라우저별 차이나는 폰트


사용하는 브라우저에 따라서 보여주는 모습이 이렇게 차이가 난다는 부분이 제게는 계속해서 찜찜함으로 남아 있었습니다.

완벽주의자까지는 아니라도 아마 많은 분들이 저처럼 신경 쓰이는 분들도 분명히 계셨을 겁니다.


웹폰트 사용시 IE만 다른폰트 표기 예


이미지를 모바일에서 보시면 차이가 잘 안 보일 것 같아 확대한 부분을 첨부했는데 생각보다 폰트의 차이가 크다는 게 보이실 겁니다.


역시 요즘 시대는 검색을 해봐야죠? 검색을 통해서 확인해보니 구글 웹폰트를 eot를 추가 생성해서 저장하는 방법이 있었습니다.

이를 티스토리 서버에 저장해 import 하면 해결이 될 것 같았습니다.


구글웹폰트참조링크


우선 위의 사이트를 접속하시면 아래와 같이 별도로 파일로 저장할 구글 웹 폰트를 선택할 수 있습니다.


구글 웹폰트 변환


자신이 저장하여 사용하길 원하시는 폰트를 찾으면 됩니다. 제 경우에는 역시 Noto Sans Kr 폰트를 찾았습니다.


Noto Sans KR 다운로드 폰트 만들기


캐릭터 셋을 korean으로 선택하시고 style은 나열된 것 모두 선택해 주세요.


css 작성


import 할 CSS 파일도 자동으로 생성해 제공해 줍니다. 수고를 많이 덜어 주는군요.


경로수정


티스토리의 경우 업로드 경로가 제한되어 있어 폰트와 추가 생성할 CSS 모두 ./images 한 폴더에 업로드되기 때문에 custommize folder를  현재 디렉토리 "./"으로 변경해 주면 웹 페이지 내 예제 CSS 내용이 자동으로 변경됩니다. 


화면의 CSS 파일 내용을 마우스로 드래그 해 긁어서 복사한 다음 notepad 나 편집기로 원하는 파일명으로 생성해 저장해 두시기 바랍니다. 제 경우는 "notosanskr12korean.css"로 파일명으로 만들었습니다.


그다음 "noto-sans-kr-v12-korean.zip" 과 같이 자신이 선택한 폰트 이름으로 생성된 zip 파일을 다운로드해서 압축을 해제하시면 됩니다.



css파일 작성


자 이제 폰트 파일 준비와 css 파일이 생성되어, 폰트를 교체할 준비가 다 되었습니다. 참 쉽죠?


다음 순서로 이 폰트 파일들과 작성한 css 파일을 티스토리 서버에 업로드 해야 됩니다.


스킨 수정을 해 보신 분들은 익숙하실 겁니다. 블로그 관리자에서 스킨 편집 -> 우측 상단 "html 편집"을 누르시면 아래와 같이 스킨 편집 화면이 나오는데 "파일업로드" 탭을 선택하시면 됩니다.


티스토리 업로드


하단에 있는 추가 버튼을 누르시고 아까 압축을 해제해 둔 폰트 파일과 css 파일을 업로드하면 됩니다. "./images" 폴더에 저장이 되는데 이 폴더의 실제 경로가 필요하니 해당 화면에서 css 파일을 아래와 같이 오른쪽 클릭하여 링크 주소를 복사해 둡니다.




복사한 사항을 notepad 등에 붙여 넣으면 다음과 같은 주소가 나옵니다. 해당 부분만 아니라 앞 부분이 다를 수도 있으니 유의하시기 바랍니다.

"https://tistory3.daumcdn.net/tistory/블로그별다른값/skin/images/notosanskrv12korean.css"


티스토리 CSS 파일 편집


이제는 CSS로 탭을 변경한 후 티스토리의 메인 CSS 파일을 변경해 줄 차례입니다.


기존의 웹 폰트를 import 하던 부분을 "/* -- */" 을 사용하여 주석 처리를 해 준 다음 새로운 import 주소를 입력해 줍니다.

앞서 복사해 두었던 url 주소를 이용하시면 됩니다.


동일한 폰트 표기


그리고 IE를 새로 고침 해보면 이렇게 Chrome과 IE가 모두 동일한 Noto Sans Kr 폰트로 보입니다. 


동일한 폰트 출력

모바일로 보실 경우 이미지가 잘 안 보일듯해서 위의 확대한 이미지를 첨부합니다.


Poster 스킨으로 변경 후 내내 마음에 걸렸던 폰트가 IE에서 다르게 보이던 문제가 드디어 해결되었습니다. 


이걸 응용하면 굳이 티스토리가 아닌 워드프레스나 다른 다양한 웹 사이트에서도 최신 구글 웹 폰트를 사용하면서 IE에서만 폰트가 다르게 출력되던 문제로 고민하고 있었다면 이 방식으로 해결이 가능해 보입니다.


참고로 저는 css 상에서 트를 다음과 같이 변경 설정해서 사용 중입니다. 스킨마다 다를 수 있으니 참조하시기 바랍니다.



body {

font-weight: 400;

font-family: 'Noto Sans KR', 'Malgun Gothic', 'Nanum Gothic', 'Nanum Barun Gothic', dotum, sans-serif; /*나눔고딕 추가*/

font-size: 1em;

line-height: 1.25;

-webkit-text-size-adjust: 100%;

-webkit-font-smoothing: antialiased;

}

-----중략-----

.entry-content p { /* PC 본문 폰트 수정 */

      margin-bottom: 24px;

      font-size: 1.07em; 

      line-height: 1.7;

      color: #141414;

  

/* Media Screen - Mobie */

-----중략-----

.entry-content p { /* 모바일 본문 폰트 수정 */

margin-bottom: 24px;

font-size: 1.246em; 

line-height: 1.6;

color: #141414;

}