font-style italic·oblique 차이, 파일이 좌우한다
font-face-generator 같은 도구에서 font-style 항목을 Italic으로 선택해 코드를 만들어도, 실제 화면에는 글자가 기울지 않고 그대로 서 있는 경우가 있습니다. 코드는 분명 font-style: italic;인데 결과가 다른 것입니다.
원인은 font-style 값과 실제 폰트 파일 안의 글자 모양이 서로 다른 이야기이기 때문입니다. 이 글은 italic과 oblique이 코드에서는 나란한 값이지만 폰트 제작 방식은 서로 다르다는 사실과, 진짜 이탤릭 파일이 연결됐는지 도구 없이 확인하는 방법을 정리합니다.
요약 ① italic은 폰트 제작자가 따로 그린 사체(斜體) 디자인을 쓰는 값이고, oblique은 원래 정자체를 기계적으로 기울인 값입니다. ②
@font-face의 font-style 값은 "이 파일을 이 스타일에 쓰라"는 선언일 뿐, 브라우저가 파일을 열어 실제로 기울었는지 확인하지는 않습니다. ③ 이탤릭 파일을 따로 연결하지 않으면 브라우저는 font-synthesis 기본 동작에 따라 정자체를 인위적으로 기울인 가짜 이탤릭을 대신 보여줍니다.
왜 이 문제가 생기는가
폰트를 배포처에서 내려받으면 보통 Regular 파일 하나만 오고, Bold나 Italic 파일은 따로 구매하거나 아예 없는 경우가 많습니다. font-style 자리에 뭘 채워야 할지 헷갈리는 지점이 여기서 시작됩니다.
@font-face 생성 도구에서 font-style 드롭다운에 Italic을 골라도, src에 연결한 파일이 원래 정자체(Regular) 파일이면 무슨 일이 벌어지는지는 코드만 봐서는 눈에 띄지 않습니다. 코드는 완성됐는데 화면은 예상과 다르게 나오는 경우입니다.
반대 상황도 있습니다. 스타일을 Normal 하나만 등록해두고 페이지 어딘가에서 <em> 태그나 font-style: italic을 쓰면, 이번엔 다른 이유로 문제가 생깁니다. 두 경우 모두 겉보기엔 "조금 기울어진 글자"로 보여서 무엇이 원인인지 구분하기 어렵습니다.
도구 없이 확인하는 방법
CSS는 font-style에 normal·italic·oblique 세 값을 정의합니다. 이 중 italic과 oblique의 정의가 서로 다르다는 점이 이 문제의 핵심입니다.
italic과 oblique, 폰트 제작 방식부터 다릅니다
italic은 폰트 제작자가 처음부터 별도로 그린 사체 디자인을 가리키는 값입니다. 진짜 이탤릭 서체는 a, f, g 같은 글자의 획 구조 자체가 정자체와 다르게 새로 설계됩니다.
oblique은 새로 그리지 않고 원래 정자체 글자를 수학적으로 기울인 값입니다. CSS 명세는 oblique 뒤에 각도를 지정할 수 있게 정의했고, 각도를 생략하면 브라우저가 정한 기본 기울기(보통 14도 안팎)를 적용합니다.
즉 코드에서는 두 키워드가 나란히 놓여 있지만, 하나는 "다시 그린 서체"를 쓰겠다는 뜻이고 다른 하나는 "기존 서체를 기울이겠다"는 뜻입니다. 이 도구에서 오블리크를 선택하면 각도 없이 순수 oblique 값만 코드에 들어가며, 각도까지 지정하고 싶다면 생성된 코드에서 직접 oblique 14deg처럼 손으로 덧붙이면 됩니다.
font-style 값은 파일 내용을 검사하지 않습니다
@font-face에 font-style: italic이라고 선언하는 것은 "이 파일을 이탤릭 요청에 쓰겠다"는 선언일 뿐입니다. 브라우저는 그 파일을 열어 실제로 기울어진 글리프인지 확인하는 절차를 거치지 않습니다.
그래서 italic 자리에 실수로 Regular 파일을 연결해도 에러 없이 그대로 등록됩니다. 화면에는 italic으로 선언된 자리인데도 똑바로 선 글자가 나타나는 결과로 이어집니다.
이탤릭 파일이 아예 없으면 브라우저가 대신 기울입니다
이번엔 반대 상황입니다. 어떤 폰트 패밀리에 Normal 파일 하나만 등록해두면, 페이지에서 이탤릭 스타일이 필요해질 때 브라우저는 그 패밀리 안에서 이탤릭으로 쓸 파일을 찾지 못합니다.
이때 대부분의 브라우저는 font-synthesis 속성의 기본 동작에 따라 정자체 글리프를 그대로 수학적으로 비스듬히 기울여 보여줍니다. 진짜 이탤릭 디자인이 아니라 계산으로 만든 기울임이라 "합성 오블리크"라고 부릅니다.
이 동작이 마음에 안 들면 CSS에 font-synthesis: none을 선언하면 됩니다. 그러면 진짜 이탤릭 파일이 없을 때 억지로 기울이지 않고 정자체 그대로 표시합니다.
저희 도구로 확인하기. font-style 자리에 어떤 값을 고를 때 실제로 어떤 코드가 만들어지는지 손으로 하나씩 맞춰보는 일은 번거롭습니다. 아래에 폰트 이름과 경로, 스타일을 넣으면 지금 설명한 구조 그대로 코드가 바로 만들어집니다.
무료 · 가입 불필요 · 브라우저에서 바로 만들어지는 @font-face 코드
자주 막히는 지점
| 상황 | 실제로 벌어지는 일 |
|---|---|
| font-style: italic 선언 + src에 Regular 파일 연결 | 브라우저가 선언을 그대로 믿어 정자체 글자가 기울지 않고 그대로 표시됨 |
| 스타일을 Normal만 등록 + 페이지에서 italic 요청 | font-synthesis 기본값에 따라 정자체를 인위적으로 기울인 합성 오블리크로 표시됨 |
| oblique 뒤에 각도 지정(예: oblique 14deg) | 명세에 정의된 대로 그 각도만큼 정확히 기울여 표시됨 |
| font-synthesis: none 선언 | 합성 기울임 자체를 꺼서, 진짜 이탤릭 파일이 없으면 정자체 그대로 표시됨 |
정리
italic과 oblique은 코드에서는 나란한 값이지만, 하나는 별도로 그린 사체 디자인이고 다른 하나는 기존 서체를 기울인 것이라는 제작 방식의 차이가 있습니다.
@font-face의 font-style 값은 파일을 검사하지 않는 선언일 뿐이라, 실제로 기울어진 글리프를 담은 파일을 연결했는지는 눈으로 따로 확인해야 합니다.
이탤릭 파일이 없는 상태에서 이탤릭 스타일이 요청되면 브라우저가 정자체를 인위적으로 기울인 합성 오블리크를 대신 보여줍니다. font-synthesis: none을 선언하면 이 자동 기울임을 끄고 정자체 그대로 표시하게 만들 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 만들어지는 @font-face 코드
자주 묻는 질문
font-style: oblique 뒤에 각도를 안 쓰면 어떻게 되나요?
각도를 생략하면 브라우저는 CSS 명세가 정한 기본 기울기를 적용합니다. 폰트나 브라우저마다 미세한 차이는 있을 수 있지만, 각도를 지정하지 않아도 oblique 값 자체는 정상적으로 동작합니다.
폰트 파일이 진짜 이탤릭인지는 어떻게 확인하나요?
macOS는 서체 관리자(Font Book)에서, Windows는 폰트 파일을 더블클릭하면 뜨는 미리보기 창에서 확인할 수 있습니다. 파일 이름에 Italic이 별도로 붙어 있는지, a·f·g 같은 글자의 획 구조가 정자체와 근본적으로 다른지를 비교하면 됩니다.
font-weight를 잘못 연결해도 비슷한 문제가 생기나요?
네, 같은 원리입니다. 브라우저는 font-weight도 파일 내용을 검사하지 않고 선언을 그대로 믿기 때문에, Bold 자리에 Regular 파일을 연결하면 화면은 얇은 글자 그대로 남을 수 있습니다. 다만 이 글은 font-style, 즉 italic·oblique 쪽 동작만 다룹니다.
font-synthesis: none을 선언하면 부작용은 없나요?
진짜 이탤릭·볼드 파일이 없는 폰트에 이 속성을 쓰면, 자동으로 기울이거나 굵게 만들어주던 대체 표시가 사라지고 정자체 그대로 남습니다. 이탤릭이나 볼드가 꼭 필요한 디자인이라면, 이 속성을 켜기 전에 실제 이탤릭·볼드 파일부터 준비해두는 편이 안전합니다.