웹 프로젝트에서 폰트는 디자인과 가독성을 결정하는 중요한 요소입니다. 이번 글에서는 웹 폰트 서비스를 이용하는 방법과 직접 폰트를 다운로드하여 적용하는 방법을 비교해 보겠습니다.

웹 폰트 서비스를 이용하는 방법 (Naver font)

---

1. 사이트 접속

먼저 네이버 한글 폰트 사이트에 접속합니다. https://hangeul.naver.com/

2. 원하는 폰트 찾기

사이트에서 다양한 폰트를 미리 보기로 확인한 후 원하는 폰트를 선택합니다.

3. 웹 폰트 url을 가져오기

선택한 폰트의 웹 폰트 URL을 복사합니다.

4. 프로젝트에 적용하

1️⃣ HTML에서 폰트 불러오기

   <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic.css" rel="stylesheet">
   <title>React App</title>
  

이 코드를 public 폴더의 index.html 파일에서 <title> 태그 위에 추가합니다.

2️⃣ CSS에서 폰트 적용하기

body {
    font-family: 'NanumGothic';
}

✅ 장점:

• 폰트 추가, 제거, 관리가 쉽다.
• 외부에서 제공하는 최신 폰트를 바로 적용할 수 있다.

❌ 단점:

• 외부 서비스에 의존해야 한다.
• 폰트를 불러오는 속도가 느려질 수 있으며, 초기 로딩 속도에 영향을 줄 수 있다.

폰트 다운로드하고 css를 적용하는 방법

---

외부 서비스에 의존하지 않고, 직접 폰트를 관리하는 방법도 있습니다. 이 방식은 폰트 로딩 속도를 최적화할 수 있다는 장점이 있습니다.

1. 마음에 드는 폰트를 다운 받는다. (왼쪽 하단 다운 버튼 클릭)

2. 사이트 접속.

WOFF/WOFF2 형식은 웹에서 최적화된 폰트 파일 형식입니다. 변환을 위해 아래 사이트를 이용할 수 있습니다. https://cloudconvert.com/

변환 후 WOFF/WOFF2 파일을 다운로드합니다.

3. 프로젝트에 적용하기

1️⃣ 폰트 파일 저장하기

변환된 폰트 파일을 프로젝트 내 src/assets/fonts/ 폴더에 저장합니다.

2️⃣ font.scss 파일 생성 및 적용

프로젝트의 scss 폴더에 font.scss 파일을 만들고 다음 내용을 추가합니다.

@font-face {
    font-family: 'NanumGothic';
    src: 
        url("../assets/fonts/NanumGothic.woff2") format("woff2"),
        url("../assets/fonts/NanumGothic.woff") format("woff")
}

3️⃣ global.scss에서 불러오기

@import url("./font.scss");

body {
    font-family: 'NanumGothic';
}

✅ 장점:

• 외부 서비스에 의존하지 않으므로 안정적이다.
• 로딩 속도가 빠르고 최적화할 수 있다.

❌ 단점:

• 폰트 파일을 직접 관리해야 한다.

• 폰트 업데이트 시 수동으로 변경해야 한다.

  결론:

• 빠르게 프로젝트를 진행하고 싶다면 웹 폰트 서비스를 이용하는 것이 좋습니다.

• 성능 최적화가 중요하다면 직접 폰트를 다운로드하여 적용하는 것이 더 나은 선택이 될 수 있습니다.

프로젝트 상황에 맞게 적절한 방법을 선택하세요!