웹 폰트에 이탤릭이 적용 안 되었던 이유
Google fonts에서 분명 폰트의 소스를 긁어왔는데도 특정 스타일이 적용 안 될 때 확인해야 할 사항.
블로그의 폰트를 모두 Noto 시리즈로 맞추려고 했다. 일단, 내가 지금 사용하고 있는 attila 테마는 스타일시트에서 폰트 패밀리 변수 “font-primary”, “font-secondary”를 사용해 헤딩과 본문의 폰트를 변수 정의를 통해 임의로 바꿀 수 있도록 해 두었다. 그래서 HTML 헤드에 다음과 같은 코드를 삽입했었다:
/* Google font에서 정의된 font-family들을 불러온다 */
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif" rel="stylesheet">
/* root에서, 변수 "font-primary"와 "font-secondary"를 정의하되,
영문 서체가 우선적으로 적용되고 해당 서체에 포함되지 않는 캐릭터는 KR 서체를 통해 표시하도록 한다. */
<style>
:root {
--font-primary: 'Noto Sans','Noto Sans KR';
--font-secondary: 'Noto Serif','Noto Serif KR';
}
</style>
그런데 이상하게도, 이탤릭처리한 로마자 문자열들이 이탤릭이 아닌 기울임꼴 처리가 되는 것이 아닌가? 이렇게 저렇게 코드를 수정해 보아도 문제가 해결되지 않고, Noto KR들이 문제인 건가 싶어 기본 Noto 서체만 남겨 보았는데도 상황이 여전했다. 다양한 키워드로 구글링해 보아도 나오는 게 없어 답답.
그러다 Google Fonts를 돌아다니던 중 문제의 원인을 파악했다. 내가 참조하게끔 한 Noto 서체의 링크는 일반 스타일만을 불러오게 하는 것이고, 이탤릭 스타일의 경우 다음과 같은 방식으로 별도의 링크를 참조시켜야 했던 것이다:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&display=swap" rel="stylesheet">
그래서 내친김에 볼드 스타일(웨이트 700)까지 싹 불러와서, 아래와 같이 링크를 참조하게끔 코드를 대체했다:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif+KR:wght@400;700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
이렇게 코드를 대체하고 나니 문제가 싹 해결되어서, 모든 이탤릭 서체들을 잘 표시할 수 있게 되었다.