폰트 굵기 적용 이슈

index.css 내부의 @font-face에서 font-weight가 적용이 안되는 현상이 발생했다. 원인이 뭘까~?

Notice 컴포넌트 작업을 하다가 알았다.

<h3 className="h-heading-3-bold">유의사항</h3>

bold 굵기가 적용이 되어야 하는데 왜 안되는걸까?!?! 아래와 같이 tailwind.config.js 에서 사용자 정의해놨는데, 분명 fontFamily로 추가해놨는데, 해당 폰트에 대한 굵기가 적용되지 않았다.

".h-heading-3-bold": {
    fontSize: "27px",
    lineHeight: "36px",
    letterSpacing: "-1.08px",
    fontFamily: "HyundaiSansHeadOffice-Bold, sans-serif",
},

웃긴건 애초에 이 폰트 자체가 bold체이기 때문에 그 폰트를 그대로 가져오는 것이므로 font-weight가 필요가 없다.

@font-face {
    font-family: "HyundaiSansHeadOffice-Bold";
    src:
        url("/public/fonts/hyundai-sans/HyundaiSansHeadOffice-Bold.woff2") format("woff2"),
        url("/public/fonts/hyundai-sans/HyundaiSansHeadOffice-Bold.woff") format("woff");
    font-weight: 700;
}

근데 이렇게 해도 적용이 안되길래 그냥 아래처럼 tailwind.config.js 에다가 font-weight를 그냥 때려박았다. 하지만 이렇게 되면 그냥 현대 폰트 글씨체는 모두 똑같고 굵기만 다른거니까 그냥 하나만 가지고 굵기 돌려쓰면 되는 것이 아닐까 생각했다. 그렇게 되면 덜 무거워지지 않을까?

".h-heading-3-bold": {
    fontSize: "27px",
    lineHeight: "36px",
    letterSpacing: "-1.08px",
    fontWeight: "700", // 추가
    fontFamily: "HyundaiSansHeadOffice-Bold, sans-serif",
},

기획과 상의해보니 애초에 HyundaiSansHeadOffice 해당 폰트 자체가 영문 폰트이기 때문에 한글 지원이 잘 안되는 것 같다고 했다. 실제 피그마에서도 기획 디자인 분들이 작업할 때 계속 발생했던 이슈라고 했다. 그래서 우선 기획 분들과 말을 맞춰 영문 부분에 현대 폰트를 적용해야 하는 부분을 제외하고 나머지 부분은 전부 Pretendard 폰트를 적용하는 것으로 결론이 나왔다.

PS. 슬랙에 지니님께서 한글 버전 현대산스 폰트를 주셔서 이 폰트를 사용해서 전부 수정했다.