웹폰트를 안 쓴 사이트가 남의 PC에서 깨지는 이유
동그리맘1004
운영팀 예시 2026.08.17
조회 21
제 화면에서는 멀쩡한데 다른 PC 크롬에서 글자가 밀리고 겹친다는 제보를 받았습니다.
원인은 웹폰트를 안 쓴 것이었습니다. CSS에는 Pretendard를 쓰라고 적어 두었는데 폰트 파일을 올리지 않아서, 그게 깔린 PC에서만 의도대로 보이고 없는 PC에서는 맑은 고딕으로 대체되고 있었습니다.
문제는 대체 자체가 아니라 그 뒤입니다. 확인해 보니 그 CSS에 글자 간격을 음수로 좁힌 곳이 275군데, 높이를 픽셀로 고정한 곳이 982군데였습니다. 폰트가 바뀌면 글자 폭이 달라지는데 상자는 그대로니 밀려 나오거나 두 줄로 터집니다.
두 가지를 같이 해야 합니다.
- 폰트를 서버에 직접 올려서 어디서나 같은 글꼴이 나오게 한다
- 그래도 고정 높이는 줄인다. 세로는 min-height로 두면 글자가 늘어나도 상자가 따라 커집니다
"내 화면에서 잘 보인다"가 가장 위험한 확인입니다.
원인은 웹폰트를 안 쓴 것이었습니다. CSS에는 Pretendard를 쓰라고 적어 두었는데 폰트 파일을 올리지 않아서, 그게 깔린 PC에서만 의도대로 보이고 없는 PC에서는 맑은 고딕으로 대체되고 있었습니다.
문제는 대체 자체가 아니라 그 뒤입니다. 확인해 보니 그 CSS에 글자 간격을 음수로 좁힌 곳이 275군데, 높이를 픽셀로 고정한 곳이 982군데였습니다. 폰트가 바뀌면 글자 폭이 달라지는데 상자는 그대로니 밀려 나오거나 두 줄로 터집니다.
두 가지를 같이 해야 합니다.
- 폰트를 서버에 직접 올려서 어디서나 같은 글꼴이 나오게 한다
- 그래도 고정 높이는 줄인다. 세로는 min-height로 두면 글자가 늘어나도 상자가 따라 커집니다
"내 화면에서 잘 보인다"가 가장 위험한 확인입니다.