1. 글꼴(font)을 사용하는 이유
Noto Sans KR은 Google에서 만든 한국어용 글꼴이에요. 이 글꼴은 깔끔하고 읽기 쉬워서 웹사이트를 더 보기 좋게 만들어줘요. 글자가 잘 보이면서도 웹사이트 속도가 느려지지 않도록 설계되어 방문자들이 더 오래 머물며 콘텐츠를 탐색하게 돼요. 이는 사용자 체류 시간을 늘리고, 검색 엔진이 웹사이트를 더 신뢰하도록 도와 SEO 점수 향상에도 긍정적인 영향을 줘요.
웹사이트에서 글꼴을 잘못 쓰면 글씨가 느리게 로드되거나 깨져 보일 수 있어요. 그럴 경우 방문자가 금방 떠날 수도 있죠. 그래서 Noto Sans KR 같은 글꼴을 올바르게 적용하는 게 중요해요.
2. Noto Sans KR 글꼴 적용하는 쉬운 방법
Noto Sans KR 글꼴을 적용하는 방법은 여러 가지가 있어요. 이 글에서는 Google Fonts 사용, 서브셋 최적화, 로컬 호스팅, 플러그인 활용 같은 다양한 방법을 단계별로 설명해 드릴게요. 이 과정을 따라 하면 누구나 쉽게 웹사이트에 글꼴을 추가할 수 있어요.
방법 1: Google Fonts 사용하기
필요한 글꼴만 선택하기
Google Fonts에 가서 “Noto Sans KR”을 검색해요.
너무 얇거나 두꺼운 글꼴(예: 100, 900)은 빼고 보통 두께(400)와 굵은 두께(700)만 골라요. 이렇게 하면 웹사이트가 더 빨리 열려요. 400이 가장 보기가 좋은 듯 합니다.
HTML에 코드 추가하기
- Google Fonts에서 제공하는 코드를 복사한 뒤, 워드프레스의
header.php파일이나 테마의 설정 페이지에 붙여 넣으세요. 예를 들어,<head>태그 내부에 아래 코드를 추가합니다:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">CSS에 적용하기
- 웹사이트 스타일을 관리하는
style.css파일에 아래 코드를 추가하세요.
body { font-family: 'Noto Sans KR', sans-serif; }방법 2: 필요한 글자만 불러오기
서브셋 사용하기
- Google Fonts에서 “korean” 서브셋만 골라 필요한 글자만 불러옵니다.
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&subset=korean&display=swap" rel="stylesheet">특정 부분에만 적용하기
- 글꼴을 꼭 필요한 곳에만 사용하도록 CSS를 설정합니다.
.custom-font { font-family: 'Noto Sans KR', sans-serif; }방법 3: 내 서버에 글꼴 저장하기
글꼴 다운로드
Google Fonts에서 Noto Sans KR 파일을 다운로드합니다.
파일 업로드
다운로드한 파일을 워드프레스의 /wp-content/uploads/fonts 폴더에 올립니다.
CSS에서 불러오기
- 아래 코드를
style.css에 추가합니다.
@font-face { font-family: 'Noto Sans KR'; src: url('/wp-content/uploads/fonts/NotoSansKR-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } body { font-family: 'Noto Sans KR', sans-serif; }방법 4: 플러그인 사용하기
OMGF 플러그인 설치
플러그인을 설치하면 Google Fonts를 내 서버에 자동으로 저장할 수 있어요.
설정 변경하기
플러그인에서 “Noto Sans KR”을 선택하고 저장하면 끝이에요. 이 방법은 코드를 몰라도 쉽게 설정할 수 있어요.
장점:
- 설치와 설정이 쉬워요.
- 코드를 몰라도 글꼴을 적용할 수 있어요.
- 자동으로 최적화되어 속도에 유리합니다.
단점:
- 플러그인이 많아지면 사이트 성능이 저하될 수 있어요.
- 특정 플러그인과 충돌할 가능성이 있어요.
3. 속도와 SEO를 위한 팁
- Lazy Loading 사용: 글꼴을 필요할 때만 불러오도록 설정하세요.
- 기본 글꼴 설정: 글꼴이 로드되기 전에 Arial 같은 기본 글꼴을 보여주세요.
- 캐싱 활용: 브라우저가 글꼴 파일을 기억하도록 설정하면 더 빨라져요.
- CDN 사용: CDN을 이용하면 가장 가까운 서버에서 글꼴을 빨리 불러올 수 있어요.
4. 테스트와 확인
브라우저에서 확인하기
크롬, 파이어폭스, 사파리 등에서 글꼴이 제대로 보이는지 확인하세요. 간혹 일부 브라우저에서 글꼴이 깨지거나 적용되지 않을 수 있으니 주의하세요.
PageSpeed Insights 사용
Google PageSpeed Insights로 웹사이트 속도를 점검하고 개선 방법을 찾아보세요. 글꼴 로딩 시간이 느릴 경우, 불필요한 글꼴 스타일을 제거하거나 서브셋을 사용하는 것이 좋습니다.
반응형 디자인 확인
모바일, 태블릿, 데스크톱 화면에서 글꼴이 잘 보이는지 확인하세요. 작은 화면에서 글꼴이 너무 작거나 깨져 보일 수 있으니 폰트 크기를 적절히 설정하세요.
일반적인 문제와 해결 방법
문제: 글꼴이 적용되지 않고 기본 글꼴로 표시됨
해결 방법: HTML 코드나 CSS 파일에 오타가 없는지 확인하고, 글꼴 파일 경로가 올바른지 점검하세요.
문제: 글꼴 로딩 시간이 너무 김
해결 방법: 글꼴 서브셋을 사용하거나 로컬 호스팅으로 변경하세요.
문제: 특정 브라우저에서 글꼴이 깨져 보임
해결 방법: 브라우저 캐시를 지우거나 다른 브라우저에서 테스트해 보세요.
Noto Sans KR 글꼴을 적용하면 웹사이트가 더 멋지고 편리해져요. 이렇게 하면 방문자가 더 오래 머물고, 검색 엔진에서도 좋은 평가를 받을 수 있답니다. 도움이 더 필요하면 언제든 물어보세요!
