웹 폰트 `font-family` 속성, 개발자들의 최신 권장 사항은?

커뮤니티에서는 네트워크 문제, 브라우저 설정, 보안 정책 등으로 인해 웹 폰트(@font-face) 로딩이 실패할 수 있음을 지적함. 따라서 안정적인 렌더링을 위해 `sans-serif`, `serif`, `monospace`와 같은 제네릭 패밀리(Generic Family)를 최후의 수단(Fallback)으로 반드시 포함해야 한다는 의견이 지배적임. 특히 `monospace`는 코드 블록 등에서 필수적이며, `font-family: monospace, monospace;`와 같이 중복 지정하는 트릭이 폰트 크기(Font Size) 불일치 문제를 해결하는 데 도움이 된다는 점이 언급됨.

토론에서는 `font-family: Arial, Helvetica, 'Helvetica Neue', Liberation Sans, 'Noto Sans', sans-serif;`와 같이 수많은 폰트를 나열하는 방식이 비효율적이라고 지적함. 사용자의 시스템에 설치된 폰트나 브라우저 기본 폰트가 더 나을 수 있으며, `sans-serif`나 `monospace`와 같은 제네릭 패밀리가 해당 역할을 충분히 수행한다고 설명함. 예외적으로 `Georgia, serif`처럼 특정 스타일을 의도할 때만 하나의 명명된 폰트를 포함하는 것이 좋다는 의견이 있음.

본문에서는 `system-ui`, `ui-*`와 같은 시스템 UI 폰트를 콘텐츠 표시용으로 사용하는 것을 경고함. 이 폰트들은 주로 짧은 UI 텍스트에 최적화되어 있어, 장문의 콘텐츠나 다양한 언어 지원에 부적합할 수 있음. 특히 macOS 외 플랫폼에서의 호환성 문제가 지적되며, `w3c/csswg-drafts` 이슈에서도 남용 사례가 논의된 바 있음. 콘텐츠 렌더링에는 제네릭 패밀리 사용이 권장됨.

과거 `monospace` 기본값이 좋지 않았던 역사적 배경(Courier New 등) 때문에 개발자들이 특정 모노스페이스 폰트를 명시적으로 지정하는 경우가 많았음. 하지만 현재 브라우저의 기본 모노스페이스 폰트 품질이 향상되어, `Menlo`, `Monaco` 등을 나열하기보다 단순히 `monospace`만 지정해도 충분하다는 의견이 제시됨. 다만, `font-family: monospace;` 단독 사용 시 발생하는 폰트 크기(Font Size) 문제를 피하기 위해 `font-family: my-web-font, monospace;` 또는 `font-family: monospace, monospace;` 형식을 권장함.