CSS / 구글 웹폰트 사용하는 방법

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

구글 웹폰트는 HTML에서 Google Fonts의 스타일시트를 불러오고, CSS의 font-family에 글꼴 이름을 지정하면 사용할 수 있습니다. 한글에는 한글 글리프를 제공하는 글꼴을 선택해야 하며, 실제로 사용할 굵기도 함께 요청하는 것이 좋습니다. 아래 예제는 Noto Sans KR의 400·700 굵기를 불러와 본문과 강조 문장에 적용합니다.

글꼴을 선택하고 삽입 코드 찾기

Google Fonts에 접속해 사용할 글꼴을 찾습니다. 이 글에서는 Noto Sans Korean 글꼴 페이지를 사용합니다.
글꼴의 미리 보기에서 실제 사용할 한글과 영문, 숫자를 확인합니다. 같은 글꼴이라도 지원하지 않는 문자는 다른 글꼴로 표시될 수 있으므로 이름만 보고 지원 언어를 판단하지 않습니다.
Get font를 누르고 선택 화면에서 Get embed code를 엽니다.
Web 탭에서 <link> 방식의 HTML 코드와 CSS의 글꼴 이름을 확인합니다. 사용할 굵기 또는 가변 굵기 범위를 정하고, 코드에 남아 있는 예시용 클래스 이름과 자리표시자는 실제 값으로 바꿉니다.

화면의 표시 이름은 Noto Sans Korean이지만 CSS에서 사용하는 패밀리 이름은 "Noto Sans KR"입니다. 요청 URL과 CSS 이름은 임의로 줄이지 말고 제공된 코드를 기준으로 맞춥니다. 아래의 완성 예제는 별도의 화면 조작 없이 그대로 저장해 적용 과정을 실습할 수도 있습니다.

전체 예제: 400과 700 굵기 적용하기

다음 코드를 google-font.html로 저장하고 인터넷에 연결된 브라우저에서 엽니다. 글꼴을 불러오는 두 단계는 <head>의 스타일시트 링크와 CSS의 글꼴 지정입니다. 링크만 넣고 적용할 요소에 글꼴을 지정하지 않으면 원하는 모양으로 바뀌지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>구글 웹폰트 실습</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&amp;display=swap">
  <style>
    body {
      margin: 0;
      color: #243449;
      background: #eef2f6;
      font-family: "Noto Sans KR", sans-serif;
      line-height: 1.8;
    }
    main { max-width: 840px; margin: 32px auto; padding: 0 20px; }
    h1 { font-size: 28px; font-weight: 700; }
    .sample {
      padding: 20px;
      border: 1px solid #b8c6d4;
      background: white;
      font-size: 26px;
      overflow-wrap: anywhere;
    }
    .regular { font-weight: 400; }
    .bold { font-weight: 700; }
    .note { font-size: 16px; }
  </style>
</head>
<body>
  <main>
    <h1>구글 웹폰트 굵기 비교</h1>
    <p class="sample regular">한글과 English 123 — 기본 굵기 400</p>
    <p class="sample bold">한글과 English 123 — 강조 굵기 700</p>
    <p class="note">글꼴 로딩 전이나 실패 시에는 sans-serif 대체 글꼴을 사용합니다.</p>
  </main>
</body>
</html>

기본 문장은 400, 강조 문장은 700 굵기로 표시됩니다. 두 문장의 앞부분은 같은 한글·영문·숫자로 작성했으므로 모양과 획 두께를 비교하기 쉽습니다. .bold의 값을 400으로 바꾸면 두 문장의 굵기가 같아지고, 700으로 되돌리면 원래 강조 상태로 돌아옵니다.

요청 URL과 CSS가 각각 하는 일

URL의 family=Noto+Sans+KR은 요청할 글꼴을, wght@400;700은 요청할 굵기를 나타냅니다. 글꼴을 불러오는 것과 실제 요소에 font-weight를 지정하는 것은 별도 단계입니다. 요청에 없는 굵기를 사용하면 브라우저가 가까운 굵기를 고르거나 합성할 수 있으므로, 화면에 필요한 굵기와 요청을 함께 검토하세요.

display=swap은 글꼴이 준비될 때까지 대체 글꼴로 텍스트를 보여 주고, 준비되면 웹폰트로 바꾸는 표시 전략입니다. 로딩 속도나 모양의 변화를 없애 준다는 뜻은 아닙니다. 두 글꼴의 폭과 높이가 다르면 교체 과정에서 줄바꿈이나 요소 크기가 달라질 수 있습니다. font-display의 값과 동작도 함께 확인할 수 있습니다.

마지막의 sans-serif는 글꼴 요청이 실패하거나 해당 문자가 없을 때 사용할 일반 글꼴 계열입니다. 사용자의 환경마다 대체 글꼴은 다를 수 있습니다. preconnect 두 줄은 외부 서버 연결을 미리 준비하는 힌트이며, 글꼴을 적용하는 CSS 선언을 대신하지 않습니다.

별도 CSS 파일에서 불러와야 한다면 그 파일의 다른 일반 규칙보다 앞에 @import를 둘 수도 있습니다. 이 경우 위 HTML의 Google Fonts 스타일시트 <link>는 제거해 중복 요청을 피하고, 나머지 CSS의 font-family 지정은 유지합니다.

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap");

적용되지 않을 때 확인할 순서

스타일시트 요청을 확인합니다. 개발자 도구의 Network에서 fonts.googleapis.com 요청이 성공했는지 확인합니다. CSS 파일을 읽는 단계와 실제 글꼴 파일을 받는 단계는 다릅니다.
글꼴 파일 요청을 확인합니다. fonts.gstatic.com의 폰트 파일이 차단되거나 실패하지 않았는지 봅니다. 네트워크 차단, 확장 프로그램 또는 사이트의 콘텐츠 보안 정책이 원인일 수 있습니다. 정책을 임의로 완화하기 전에 정확히 어떤 요청이 막혔는지 확인하세요.
적용된 글꼴과 굵기를 확인합니다. 텍스트 요소를 선택해 계산된 스타일의 font-family, font-weight와 브라우저가 제공하는 실제 렌더링 글꼴 정보를 확인합니다. 선언에 이름이 보인다는 사실만으로 다운로드된 글꼴이 실제 쓰였다고 판단하지 않습니다.
요청한 문자와 CSS 우선순위를 확인합니다. 한글만 다른 글꼴이면 한글 지원 여부를 확인하고, 제목만 바뀌지 않으면 테마의 제목 선택자가 다른 글꼴을 덮어쓰는지 확인합니다. 추가했던 규칙을 잠시 제거해 비교한 뒤 필요한 범위에만 다시 적용합니다.

사이트 전체에 적용할 때는 테스트한 링크를 테마의 공통 <head> 출력이나 해당 사이트의 리소스 로딩 경로에 한 번 등록하고, 공통 CSS에서 글꼴을 지정합니다. 워드프레스 개별 글 본문에 문서 전체의 <head>나 <style>를 그대로 붙이는 방식으로 사이트 전체 설정을 바꾸지는 않습니다.

필요한 굵기와 글자 범위만 불러오기

본문과 제목에 400·700만 사용한다면 우선 그 두 굵기로 시작합니다. 가변 폰트에서 여러 중간 굵기를 연속으로 써야 할 때는 지원 범위 안에서 wght@100..900처럼 범위를 요청할 수 있습니다. 글꼴에 없는 범위나 축을 추정해서 넣지 말고 현재 제공 코드와 Google Fonts CSS2 API 공식 문서를 확인하세요.

고정된 짧은 제목만 꾸미는 경우에는 API의 text= 매개변수로 필요한 문자를 제한할 수도 있지만, 일반 본문이나 사용자가 입력하는 내용에는 필요한 글자가 빠질 수 있습니다. 한글 글꼴은 다양한 문자를 다루므로 화면에서 자주 쓰는 몇 글자가 보인다는 이유로 전체 문자 지원까지 확인한 것으로 보지 않습니다.

Google Fonts를 원격으로 불러오면 브라우저가 외부 글꼴 서버에 접속합니다. 외부 연결 없이 제공해야 하는 서비스라면 해당 글꼴의 라이선스와 배포 파일을 확인해 직접 호스팅하는 방법을 별도로 검토합니다. 기본 연결과 대체 글꼴 지정 방법은 Google Fonts API 시작 안내에서 확인할 수 있습니다.

CSS