나눔고딕 적용시 문제점

네이버에서 제공되는 나눔고딕은 세가지 베리에이션을 가지고 있습니다.

• 400 : 보통
• 600 : 굵게
• 700 : 아주 굵게

IE 에서 폰트 스타일을 bold 로 세팅하게 되면 700 으로 표현됩니다.

반면 다른 브라우저에서는 600 으로 표현되죠.

크롬에 적용된 bold 스타일

IE 에 600 으로 지정된 스타일

IE 에 지정된 bold 스타일 font-weight: 700 과 같다

이거 어떻게 해결하는게 좋을까 살펴보다 구글 웹폰트는 이 문제가 해결된 상태로 배포되는 것을 확인하였습니다.

font-weight 가 수정된 나눔고딕

이전 코드와 변경한 코드를 비교해 봅니다.

<link rel='stylesheet' href='/c/green-lantern.css'/>

{% if useragent.isDesktop %}

<link rel='stylesheet' href='/c/webfont.css'/>

{% endif %}

<script src="http://www.google.com/jsapi"></script>

<script src="/s/lib/jquery-1.8.3.min.js"></script>

{% if useragent.isDesktop %}

<script src="/s/lib/jquery.font.mini.js"></script-->

<script type="text/javascript">

    $(document).ready(function () {

        // check installed fonts

        if ($.font.test("맑은 고딕") || $.font.test("나눔고딕") || $.font.test("Malgun Gothic") || $.font.test("NanumGothic") || $.font.test("Apple SD Gothic Neo Medium")) {

            //console.log("use local font");

        } else {

            // web-font loader

            //console.log("loading webfont...");

            google.load("webfont", "1");

            google.setOnLoadCallback(function () {

                WebFont.load({ custom: {

                    families: [ "NanumGothic" ],

                    urls: [ "http://fontface.kr/NanumGothic/css" ]

                }});

            });

        }

    });

</script>

{% endif %}

/* webfont from http://fontface.kr/ */

.wf-active *,

.wf-active body,

.wf-active table,

.wf-active input,

.wf-active textarea,

.wf-active select,

.wf-active button {

    font-family: "NanumGothic"; /* "Malgun Gothic", "Apple SD Gothic Neo Medium" */

}

*,

body,

table,

input,

textarea,

select,

button {

    font-family: "나눔고딕", "NanumGothic", "맑은 고딕", "Malgun Gothic", "Apple SD Gothic Neo Medium";

}

구글 웹폰트로 변경 한 후 코드입니다.

<link rel='stylesheet' href='/c/green-lantern.css'/>

{% if useragent.isDesktop %}

<link rel='stylesheet' href='/c/webfont.css'/>

{% endif %}

<script src="/s/lib/jquery-1.8.3.min.js"></script>

{% if useragent.isDesktop %}

<script type="text/javascript">

  

</script>

{% endif %}

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

*,

body,

table,

input,

textarea,

select,

button {

    font-family: "Nanum Gothic", "나눔고딕", "NanumGothic", "맑은 고딕", "Malgun Gothic", "Apple SD Gothic Neo Medium";

}

코드 량도 줄고 추가된 스크립트 없이 나눔고딕을 사용할 수 있지만 jquery.font 를 사용하지 않아 발생하는 득/실이 좀 있지만 변경된 코드가 더 간결하고 명확해진 것은 확실합니다.

jquery.font 스크립트가 꼼수를 사용해 폰트 체크를 하는 수고로움도 덜 수 있겠지요.

이 정도로 마무리 합니다.