(google fonts) Nanum Gothic 웹폰트 깨짐 현상

나눔고딕 웹폰트 깨지는 문제

google fonts의 나눔고딕을 보니 특정 폰트 크기에서 폰트가 깨지는(?) 현상, 글씨 두께가 일정하지 않는 현상을 발견함. ㅠㅠ

예를 들어 Regular는 24~25px, Bold의 경우 15~16px 등등...

일정 크기에서 각 weight별 버그가 있는 것 같음.

https://fonts.google.com/specimen/Nanum+Gothic

Nanum Gothic - Google Fonts

 

개인적인 예상으로 google에서 사용하는 css에서 .woff2만 사용하는데,

이게 문제의 원인이 아닐까 싶은... -_-;;;

 

 

 

 

해결법 (일단은...)

"-webkit-font-smoothing: antialiased" 설정을 바꿔보는 등 여러가지 테스트를 해봤지만,

google fonts에서 CDN방식으로 <link> 또는 @import 방식으로 가져와서 사용하는 경우는 해결이 되지 않음.

 

현재 발견한 방법은 위 방법 대신 css에서 @font-face로 직접 세팅해서 쓰면

원래 가지런하게 나오는 폰트를 만날 수 있었당~~

 

/* @font-face로 가져오는 방법 */

@font-face {
font-family:'Nanum Gothic';
font-style:normal;
font-weight:400;
src:local("Nanum Gothic"),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff');
}

@font-face{
font-family:"Nanum Gothic Bold";
font-style:normal;
font-weight:700;
src:local("Nanum Gothic Bold"),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff');
}

 

급하게 옛날에 쓰던 소스를 가져옴~ㅋ

 

다만 @font-face로 가져오는 경우 폰트 리프레시 문제와 같은 또다른 버그가 존재하기 때문에

일단 임시방편으로 쓰고, 근본적인 해결책을 강구해봐야 할 것 같음...

 

 

 

(또르르)