적용한 폰트가 브라우저별로 차이가 발생합니다.
같은 폰트가 사용된 페이지를 서로 다른 브라우저에서 확인했을 때 민감한 분이라면 차이를 느낄 수 있습니다. 하지만 이는 폰트가 잘못 적용된 것이 아닌, 브라우저나 운영체제에 따라 폰트를 표현하는 방식이 달라 차이가 발생하는 것입니다.
위 이미지는 Google Fonts - Roboto 에서 폰트 크기를 13px로 조정한 상태에서 캡쳐한 것입니다. 보시다시피 같은 폰트임에도 브라우저나 심지어 같은 브라우저라도 운영체제에 따라서 미묘하게 다른 형태로 표현되는 것을 확인할 수 있습니다.
웹사이트 운영자는 브라우저마다 폰트가 다르게 표현되는 것을 원치 않을 수 있습니다. 하지만 운영체제 및 브라우저 차원의 문제이기 때문에 웹페이지의 언어로는 제어가 불가능합니다. 일부 CSS의 마크업(예: -webkit-font-smoothing: antialiased)으로 글꼴을 조금 더 부드럽게 하는 등의 조정이 가능하지만, 근본적으로 같은 렌더링으로 표현하는 것은 불가능합니다.
폰트 렌더링을 바꾸는 것은 불가능하기 때문에 폰트 렌더링 차이에 의해 발생하는 글꼴의 크기(폭, 높이)차로 인한 줄바꿈 현상을 방지하는데 더 신경을 써야 합니다. 예를 들어 텍스트가 들어갈 공간이 텍스트의 길이와 딱 맞게 표현되고 있다면, 어떤 브라우저에서는 공간이 충분하지 않아 의도치 않은 텍스트 줄바꿈이 발생할 수 있습니다. 따라서 텍스트가 삽입될 공간을 텍스트 길이보다 충분히 확보해두는 것이 바람직 합니다.