Font style matcher

웹폰트를 사용한다면, 최초의 폰트 렌더링과 당신이 선택한 웹폰트 렌더링 사이에 텍스트가 깜빡이는 현상을 볼 수 있습니다. 두가지 폰트 사이의 크기 불일치로 인해 레이아웃에서 미묘한 차이를 만들기 때문에, 사이트의 layout에 미묘한 차이가 발생됩니다. 이러한 불일치을 최소화하기 위해서는, fallback 폰트(웹폰트 로드 전 적용 폰트)와 의도한 웹폰트의 x-height와 width를 맞추어야합니다. 그럴때 이 앱을 사용하시면 됩니다.

Overlapped

기본 에제에서는, "Nanum Gothic" 폰트의 경우 "Black Han Sans" 보다 문자폭이 길고 넓기 때문에 "Nanum Gothic"의 font-size, letter-spacing, line-height, letter-spacing, word-spacing 등의 css속성값을 바꾸어 레아웃이 바뀌는 현상을 완화해보세요.

적용될 webfont 색상 변경
FOUT로 인한 레이아웃 변동 확인
한/영 변환