크롬의 font-family 한글 표시 버그 해결방법

크롬의 font-family 한글 표시 버그로 한글 폰트에 부분부분 점이 찍힌 것 같은 증상이 나타난다. css를 수정하거나, 브라우저의 폰트설정을 조정함으로써 이 버그를 해결하는 방법에 대해 써본다.

Advertisements
fonts

1. 크롬에서 나타나는 글꼴 랜더링 버그

chrome-korean-font-bug

이전의 글에서 언급한 것처럼 워드프레스의 테마중에서 Twenty Twelve 테마를 사용하는 경우, 크롬에서 글꼴이 이상하게 랜더링되는 현상이 있다. 이것은 Twenty Twelve 테마에서 새로 적용된 글꼴 랜더링이, 영문 글꼴은 더욱 더 미려하고 표현하도록 해주지만 한글 폰트에서는 버그를 일으키기 때문이다. 이것을 해결하기 위한 방법은 두가지로 나눌 수 있다.

2. 블로그 운영자가 해결하는 방법

우선 블로그 운영자의 경우에는 테마 파일을 수정해야 한다. FTP등을 이용해서 “wp-content/themes/twentytwelve/style.css" 파일을 열고 아래 코드를 찾는다. 484번째 줄이다.

body {
  font-size: 14px;
  font-size: 1rem;
  font-family: Helvetica, Arial, sans-serif;
  /* text-rendering: optimizeLegibility; */
  color: #444;
}
그리고 위에 표시된 것처럼 text-rendering: optimizeLegibility; 앞뒤로 /*와 */를 넣어서 주석 처리를 하거나 그 줄을 지운다. 그러면 더 이상 글꼴 랜더링이 이상하게 되는 현상이 나타나지 않는다.

다른 해결 방법으로는 글꼴 랜더링의 이상을 가지고 오는 글꼴이 굴림등의 글꼴이므로, 블로그의 기본 글꼴을 많은 고딕이나 나눔고딕등으로 바꾸는 방법도 있다.

하지만 이런 방법들을 wordpress.com에서 적용하려면 추가 비용이 발생한다. wordpress.com에서는 css를 수정하려면 매년 $30를 지불해야하기 때문이다. wordpress.com에서 블로그를 운영하는 사람들에게는 상당히 아쉬운 점이다.

3. 블로그 방문자가 해결하는 방법

블로그에 방문하는 사람들이 이 문제를 해결하는 방법은 매우 간단하다. 기본적으로 Twenty Twelve등의 테마에서 글꼴 랜더링 문제가 발생하는 것은 굴림등의 특정 글꼴에서만이므로 굴림이 아닌 맑은 고딕이나 나눔고딕등의 글꼴을 크롬의 기본 글꼴로 지정해주면 된다. 이러한 글꼴 랜더링 버그는 워드프레스의 Twenty Twelve 테마를 사용할 때뿐만 아니라 가끔 다른 웹사이트에서도 나타나는 현상이므로 가급적이면 크롬의 기본 글꼴을 굴림이 아닌 다른 글꼴로 바꿔주는 것이 좋다. 글꼴을 바꾸는 방법은 아래를 참조하면 된다.

※ 크롬에서 글꼴 설정하기

1) 설정창에서 맨 아래에 있는 고급 설정 표시를 누르고, 아래로 스크롤하면 아래와 같은 글꼴 설정 부분이 있다. 여기서 글꼴 맞춤 설정을 누른다.
Chrome_Font-Option_01
2) 글꼴 설청창이 뜨면 글꼴을 설정해준다. 여기서 표준 글꼴과 Sans-Serif글꼴은 같은 것으로 지정하면 되고 Serif글꼴을 명조체 글꼴을 지정하면 된다. 마지막으로 고정폭 글꼴을 지정해준다.
Chrome_Font-Option_02

2 thoughts on “크롬의 font-family 한글 표시 버그 해결방법”

  1. Reblogged this on Different Insight and commented:
    Twentytwelve Theme를 사용중이니, 당연히 오류가 나겠네요. 흠..
    별 내용도 없으니 일단은 내가 보기에 깔끔하면 될 듯 한데
    여하튼 “kalkin7” 님의 글 감사합니다. 모를 사실을 알게되었으니 🙂

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중