[React] 웹 개발에서 한글 폰트 적용하기 - 눈누

웹 페이지의 가독성과 디자인을 위해서는 적절한 폰트를 사용하는 것이 중요하다.
특히 한글 웹 페이지에서는 사용할 수 있는 폰트가 제한적이기 때문에 상업적으로 무료 사용이 가능한 폰트를 찾아 사용하는 것이 좋다.

1. 눈누

눈누 - 상업용 무료 한글 폰트는 상업적으로 무료 사용이 가능한 한글 폰트를 모아놓은 사이트이다.

다양한 폰트를 미리 확인할 수 있고, 웹에서 폰트를 적용하는 방법도 확인할 수 있어 웹 개발에서 유용하게 사용할 수 있다.

프리텐다드

많이 사용하는 한글 폰트 중 하나가 프리텐다드(Pretendard)이다.

프리텐다드는 깔끔하고 가독성이 좋아 웹사이트나 애플리케이션에서 많이 사용된다.

프리텐다드 - 눈누

2. CSS로 프리텐다드 적용하기

CSS의 @import를 사용하면 별도로 폰트 파일을 다운로드하지 않고 웹에서 프리텐다드를 불러올 수 있다.

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

html {
    font-family: "Pretendard Variable";
}

@import를 통해 프리텐다드 폰트를 불러온 후 font-family에 폰트 이름을 지정하면 웹 페이지 전체에 적용할 수 있다.

이렇게 html에 지정하면 별도로 폰트를 지정하지 않은 하위 요소들도 기본적으로 해당 글꼴을 상속받게 된다.