Safari(사파리) 에서 폰트가 이상하게 보일경우 해결법 / CSS font-family 속성 총정리

https://medium.com/p/eadd80295a6 로 부터 옮겨온 게시물입니다.

• 작성시기: 2020-11-06

일단은 웹서핑 하시는 비 개발자 여러분을 위한 해결법을 알려 드리겠습니다. 개발자 분께서는 개발자 관점에서의 해결법 항목을 읽어주세요.

비 개발자 관점에서의 해결법

Safari 로 웹서핑 하다보면 간혹가다 특정 사이트에서 이상한 명조체 같은 글꼴로 되어있어 어색하고 가독성이 떨어지는 것을 볼 수 있습니다.

이와같이 빨간색 네모로 표시된 글꼴처럼 말이죠. 이럴때는 css 파일을 사파리 설정에 적용시키면 되는데요, 아래의 파일을 다운받아주세요.

safari_defaultfont.zip

받았으면, 사파리 창을 활성화 시킨 상태에서 ⌘ + ,(comma) 를 눌러 환경설정으로 가고, '고급' 메뉴에서 '스타일 시트' 를 클릭한 후 'Other...' 를 눌러 다운받은 파일을 적용해주시면 완료됩니다.

개발자 관점에서의 해결법

아래의 두 스크린샷 중 첫번째는 Safari, 두번째는 Chrome 의 화면입니다.

이걸 보고 사파리가 이상하다, 표준을 안 지킨다고 생각들 수도 있는데요, 사실은 Safari 에서는 전혀 오류가 없습니다. 결론부터 말씀드리자면 웹사이트 개발자의 부주의로 웹브라우저의 default font 까지 적용되었기 때문이라고 말씀드릴 수 있겠습니다. 즉, 웹 브라우저 마다 default font 가 다르다는 말입니다. 당연히 지금은 무슨말인지 이해가 가지 않을겁니다. CSS의 font-family 의 동작원리와 그와 관련된 환경을 제대로 알아야 하는데요, 그럼 이제부터 CSS 의 font-family 속성에 관한 모든것을 최대한 알기쉽게 설명드리며, 프론트엔드 개발자라면 어떤 컨벤션을 가지고 폰트를 적용시켜야 하는지 말씀드리는 시간을 가지도록 하겠습니다.

개발자는 비 개발자 관점에서의 해결법의 형태로 스타일을 적용하여 해결해서는 절대 안됩니다. 다수 사람들의 기본 설정을 고려하고 똑같은 환경에서 모니터링 해야하므로 스타일시트 설정은 그대로 둡니다.

font-family 의 원리

보통 우리는 font-family: [1순위], [2순위], [3순위], [...] 와 같은 원리로 현재 OS 에 있는 폰트가 적용된다고 알고 있습니다. 하지만 이렇게만 알면 안되고 정확한 알고리즘을 알아야 합니다. 알고리즘은 다음과 같습니다.

1. [1순위]의 폰트가 OS 에 있는지 확인한다. 있으면 그것을 바로 적용한다.
2. 없으면 웹서버에 정의된 웹폰트가 있는지 확인한다.
3. 웹서버에 웹폰트가 있으면 다운을 받고, 없으면 [1순위]의 폰트는 없다 간주하고 [2순위]의 폰트를 검사하기 시작한다.
4. 1~3의 작업을 반복한다.

작업을 계속 반복 해도 폰트를 찾지 못한 경우, 비로소 브라우저 설정에 정의된 default font 가 사용되는데요, 그 종류는 serif(명조체), sans-serif(고딕체, 명조체에서 삐져나온부분을 산~하고 잘라 반듯한 고딕체로 만들었다고 외웠습니다. -.-^), monospace(너비가 동일한 문자), standard(앞의 3가지에 해당 안되는경우) 4가지가 있습니다.

저 4가지 중 하나를 font-family 속성의 마지막 요소로 적어줘야 default font 를 어느 성격의 문자로 쓸 것인지 정해주게 되는 것입니다. 따라서 브라우저 환경설정에서 미리 설정된 OS 폰트를 따라가기 때문에 절대 폰트가 누락될 일은 없는 것이지요. 우리가 개발할 때, 해당 폰트가 명조체인지 고딕체인지 보면 알게 되는데요, 뭔 종류의 폰트인지 판단하여 반드시 마지막에 serif, sans-serif, monospace 중 하나를 적어주시기 바랍니다. 혹시나 모를 네트워크 문제로 상위 우선순위 폰트가 다운받아지지 않으면, 기본 OS 폰트라도 받아와 명조체인지 고딕체인지 구분돼야 하니까요(물론 요즘 한글의 대세는 나눔고딕 같은 고딕체이지만요..). standard 는 뭐냐고요? font-family 속성의 마지막 아이템이 serif, sans-serif, monospace 가 아니라면 standard default font 를 적용하는 겁니다. 보통 사이트를 보면 디폴트를 제대로 명시 안해주니 standard 를 따라왔던 것이지요.

default font 설정

그럼 이제 브라우저의 default font 설정을 찾아봅시다. 크롬브라우저 에서는 chrome://settings/ 으로 가셔서 아래 스크린샷 같이 Customize fonts 를 클릭해 줍니다.

표시한 부분을 보시면, 아까 배웠던 익숙한 표현들이 보이죠?? 저기서 세팅한 대로 default font 가 적용되는 겁니다. Fixed-width font 는 monospace 입니다.

language-script 별 default font 설정

근데 여기까지만 알고 끝내면 안됩니다!!! HTML 태그의 lang 속성에 따라 default font 가 제각각 설정돼있는데요, 위에서 봤던 스크린샷에서 보고있는 설정은 HTML 태그에서 lang 속성이 없을때 따르는 기본 설정입니다. default font 의 default language-script 설정 이라고 할 수 있겠지요. lang 속성이 무엇이냐에 따라 default font 는 얼마든지 달라질 수 있습니다.

Chrome 에서의 설정

다른 language-script 의 설정을 보려면? 현재 브라우저에선 볼 수 없고요, Advanced Font Settings 라는 크롬 확장 프로그램을 설치해야 합니다. 설치 후 확장프로그램에서 Options를 클릭해보면 아래와 같이 나옵니다.

Script 에서 language-script 를 설정해야 합니다(계속 language-script 라고 말씀드리는데, 한 언어에서는 여러 글자가 있는데요, 디폴트 폰트 설정 단계는 언어가 아닌 ISO 15924 표준에 기반된 글자차원의 language-script 를 따르게 됩니다.). default 는 아까 말씀 드렸다시피 현재 크롬의 설정과 동일합니다. default 말고 hangul 을 선택해봅시다.

HTML 에 lang=”ko” 라고 설정돼있을 경우 이 디폴트 폰트를 따르게 되는데요, 아까와는 다르죠?? 이러한 부분에서도 lang의 존재를 모른다면 한끗차이로 예상치 못한 변화가 발생할 수 있습니다. 나는 크롬 설정에서 default font 를 바꾸고 싶은데 웹사이트의 폰트가 안 변하네? 알 수 없는 의문을 가지게 됩니다. 그럴땐 lang 속성을 인지하고 Advanced Font Settings 크롬 익스텐션을 깔아서 그곳에서 변경해야지요.

Safari 에서의 설정

Safari 같은 경우엔 간단합니다. 원래는 설정에서 디폴트 폰트를 바꿀 수 있었지만, 이제는 사라졌고요, https://trac.webkit.org/browser/trunk/Source/WebCore/Resources/DefaultFonts.plist.in?rev=114895 의 내용을 따르게 됩니다. default, japanese, korean 설정 다 적혀 있으니까 한번 쭉 보세요. 역시 언어에 따라 디폴트 폰트는 다릅니다.

정리

참~ 많은 길을 걸어왔습니다. 다시 처음 봤던 스크린샷을 꺼네봅시다.

브라우저마다 왜 다른지 이제는 알 수 있을겁니다. 실제로 저 두 요소는 CSS로 font-family: '굴림',Gulim; 가 적용돼 있습니다. OS 에 없는 글꼴이라 쳐도 웹서버에서 웹폰트를 제공해 줬다면 브라우저별로 보이는 폰트는 통일됐을 겁니다. 하지만 이 사이트에서는 웹폰트를 제공하지 않았습니다. 따라서 마지막 요소까지 읽어, serif, sans-serif, monospace 도 아닌 standard 로 정의된 디폴트 폰트를 따르게 되는 것입니다. 이 디폴트 폰트가 Safari, Chrome 에 다르게 설정돼있어서 그런 것입니다(또한 이 사이트는 로 시작하므로 한글쪽 디폴트폰트를 불러옵니다).

그럼 이제 개발자는 어떻게 개발해야할 것인지 감이 섭니다. 이제 다음과 같은 컨벤션이 나옵니다.

font-family: A, B, C, [serif, sans-serif, monospace, X];

1. A, B, C 각각을 웬만하면 아래와 같은 방식으로 웹폰트로 정의한다.

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url(/static_fonts/NanumGothic-Regular.eot), 
        url(/static_fonts/NanumGothic-Regular.woff2) format("woff2"), 
        url(/static_fonts/NanumGothic-Regular.woff) format("woff"),
        url(/static_fonts/NanumGothic-Regular.ttf) format("truetype");
}

2. 가급적 A, B, C 폰트의 성격에 따라 마지막에 default font 를 기입해주도록 하자(웬만하면 standard가 아니도록)

이렇게 하면 이제 브라우저마다 폰트가 달라 보일리는 없을겁니다.

결론

저희가 바꿀건 없고 바꿀수도 없고, 해당 사이트의 웹개발자가 잘못했네~ 하고 넘어가시면 됩니다. 다만 내가 웹프로그램을 만들땐 위에서 배운 정확한 컨벤션으로 합시다. :)

넋두리

이틀간의 삽질로 인해 얻은 값진 결과입니다. 제가 왜 삽질 시간이 길었는지 성찰해가며 다음엔 더욱 효과적으로 Trouble Shooting 이 가능하도록 개선하고자 합니다. 삽질시간이 길어진 이유는, 간단하게 만들려고 노력하지 않아서 그런것 같습니다. 테스트를 할 때에는 간단하게 최대한 변수를 알아보기 쉬운 환경을 만들었어야 했습니다. 저는 이미 있는 복잡한 코드로된 사이트에서 속성만을 변경시키며 규칙의 변화를 감지하려 했습니다. 그렇게 하지 말고 간단하게 해결하기 위해서는, Body 를 날린 후 body 의 컨텐츠로 간단한 문장 하나만 놓고 head 를 하나하나 지워가며 어디에서 문제가 발생하는지 알아봐야합니다. 마지막 head 까지 지워도 변화는 없더군요.. 절망적이었는데 혹시나 의 lang 속성이 문제였나 생각해서 지워봤는데 그것이 맞았습니다. 테스트 환경을 단순화하지 않았다면 해결하기 힘들었을 겁니다. 다음부턴 처음부터 어떻게하면 단순하게 할 수 있는지 생각을 먼저하는 습관을 들여야 겠습니다.