Google Fonts API 시작하기

이 가이드에서는 Google Fonts API를 사용하여 웹페이지에 글꼴을 추가하는 방법을 설명합니다. 프로그래밍을 할 필요가 없습니다. HTML 문서에 특수 스타일시트 링크를 추가한 다음 CSS 스타일로 글꼴을 참조하기만 하면 됩니다.

간단한 예

black cat ate the mouse라는 다음 HTML을 복사하여 파일에 붙여넣습니다.

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

그런 다음 최신 웹브라우저에서 파일을 엽니다. Tangerine이라는 글꼴로 다음을 표시하는 페이지가 표시됩니다.

웹 꾸미기

문장은 일반 텍스트이므로 CSS를 사용하여 모양을 변경할 수 있습니다. 이전 예의 스타일에 그림자를 추가해 보세요.

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

이제 텍스트 아래에 그림자가 표시됩니다.

웹 꾸미기

이는 Fonts API 및 CSS로 할 수 있는 작업의 시작에 불과합니다.

개요

다음 두 단계만 거치면 Google Fonts API를 사용할 수 있습니다.

  1. 스타일시트 링크를 추가하여 원하는 웹 글꼴을 요청합니다.

    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Font+Name">
    

  2. 스타일시트에서 요청된 웹 글꼴을 사용하여 요소의 스타일을 지정합니다.

    .css-selector {
    font-family: 'Font Name', serif;
    }
    

    또는 요소 자체에 인라인 스타일을 사용합니다.

    <div style="font-family: 'Font Name', serif;">Your text</div>
    

사용할 수 있는 글꼴 목록은 Google Fonts를 참고하세요.

스타일시트 URL에 글꼴 모음 및 스타일 지정

스타일시트 링크에 사용할 URL을 결정하려면 Google Fonts API 기본 URL로 시작합니다.

https://fonts.googleapis.com/css

그런 다음 하나 이상의 글꼴 모음 이름 및 스타일이 포함된 family= URL 매개변수를 추가합니다.

예를 들어 Inconsolata 글꼴을 요청하려면 다음 안내를 따르세요.

https://fonts.googleapis.com/css?family=Inconsolata

여러 글꼴 모음을 요청하려면 파이프 문자(|)로 이름을 구분합니다.

예를 들어 Tangerine, Inconsolata, Droid Sans 글꼴을 요청하려면 다음을 사용하세요.

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

여러 글꼴을 요청하면 페이지에서 이러한 글꼴을 모두 사용할 수 있습니다. 하지만 너무 지나치지는 마세요. 대부분의 페이지에는 많은 글꼴이 필요하지 않으며 글꼴을 많이 요청하면 페이지 로드 속도가 느려질 수 있습니다.

Google Fonts API는 기본적으로 요청된 글꼴의 일반 버전을 제공합니다. 다른 스타일이나 두께를 요청하려면 글꼴 이름에 콜론 (:)을 추가하고 그 뒤에 쉼표로 구분된 스타일 또는 두께 목록 (,)을 추가합니다.

예를 들면 다음과 같습니다.

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

특정 글꼴에 사용할 수 있는 스타일과 두께를 알아보려면 Google Fonts의 글꼴 목록을 참고하세요.

요청하는 각 스타일에 전체 이름 또는 약어를 지정할 수 있습니다. 가중치의 경우 숫자 가중치를 지정할 수도 있습니다.

스타일 지정자
기울임꼴 italic 또는 i
굵게 bold 또는 b 또는 숫자 가중치(예: 700)
굵은 기울임꼴 bolditalic 또는 bi

예를 들어 Cantarell 기울임꼴과 Droid Serif 굵게를 요청하려면 다음 URL 중 하나를 사용하면 됩니다.

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

글꼴 표시 사용

font-display를 사용하면 글꼴을 사용할 수 없을 때 발생하는 작업을 제어할 수 있습니다. 일반적으로 기본 auto 이외의 값을 지정하는 것이 적절합니다.

쿼리 문자열 display 매개변수에 원하는 값을 전달합니다.

https://fonts.googleapis.com/css?family=Roboto&display=swap

스크립트 하위 집합 지정

Google Font Directory의 일부 글꼴은 여러 개의 서체 (예: 라틴어, 키릴어, 그리스어)를 지원합니다. 다운로드할 하위 집합을 지정하려면 하위 집합 매개변수를 URL에 추가해야 합니다.

예를 들어 Roboto Mono 글꼴의 키릴 자모 하위 집합을 요청하는 URL은 다음과 같습니다.

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Roboto Mono 글꼴의 그리스어 하위 집합을 요청하는 URL은 다음과 같습니다.

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Roboto Mono 글꼴의 그리스어 및 키릴 문자 하위 집합을 모두 요청하려면 URL이 다음과 같습니다.

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

라틴어 하위 집합은 가능한 경우 항상 포함되며 지정할 필요가 없습니다. 클라이언트 브라우저가 유니코드 범위(http://caniuse.com/#feat=font-unicode-range)를 지원하는 경우 하위 집합 매개변수는 무시됩니다. 브라우저는 글꼴에서 지원하는 하위 집합 중에서 선택하여 텍스트를 렌더링하는 데 필요한 항목을 가져옵니다.

사용 가능한 글꼴 및 글꼴 하위 세트의 전체 목록은 Google Fonts를 참고하세요.

글꼴 요청 최적화

웹사이트나 애플리케이션에서 웹 글꼴을 사용할 때 어떤 문자가 필요한지 미리 알고 있는 경우가 많습니다. 이 문제는 로고나 제목에 웹 글꼴을 사용할 때 종종 발생합니다.

이 경우 글꼴 요청 URL에 text= 값을 지정하는 것이 좋습니다. 이렇게 하면 Google에서 요청에 최적화된 글꼴 파일을 반환할 수 있습니다. 이렇게 하면 글꼴 파일의 크기가 최대 90%까지 줄어들 수 있습니다.

이 기능을 사용하려면 Google Fonts API 요청에 text=를 추가하기만 하면 됩니다. 예를 들어 블로그 제목에 Inconsolata만 사용하는 경우 제목 자체를 text= 값으로 입력할 수 있습니다. 요청은 다음과 같이 표시됩니다.

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

모든 쿼리 문자열과 마찬가지로 값을 URL 인코딩해야 합니다.

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

이 기능은 국제 글꼴에도 작동하여 UTF-8 문자를 지정할 수 있습니다. 예를 들어 ¡Hola!는 다음과 같이 표현됩니다.

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

글꼴 효과 사용 설정 (베타)

웹사이트에서 헤더나 디스플레이 텍스트를 만들 때 장식적인 방식으로 텍스트 스타일을 지정하는 것이 좋습니다. Google에서는 작업을 간소화하기 위해 최소한의 노력으로 멋진 디스플레이 텍스트를 만들 수 있는 글꼴 효과 모음을 제공합니다. 예를 들면 다음과 같습니다.

글꼴 효과입니다.

이 베타 기능을 사용하려면 Google Fonts API 요청에 effect=를 추가하고, 영향을 주려는 HTML 요소에 상응하는 클래스 이름을 추가하기만 하면 됩니다. 위 예에서는 shadow-multiple 글꼴 효과를 사용했으므로 요청은 다음과 같습니다.

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

효과를 사용하려면 상응하는 클래스 이름을 HTML 요소에 추가합니다. 상응하는 클래스 이름은 항상 font-effect- 접두사가 붙은 효과 이름이므로 shadow-multiple의 클래스 이름은 font-effect-shadow-multiple입니다.

<div class="font-effect-shadow-multiple">This is a font effect!</div>

효과 이름을 파이프 문자 (|)로 구분하여 여러 효과를 요청할 수 있습니다.

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

다음은 Google에서 제공하는 모든 글꼴 효과의 전체 목록입니다.

영향 API 이름 클래스 이름 지원
애너글리프 anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
벽돌 간판 brick-sign font-effect-brick-sign Chrome, Safari
캔버스 프린트 canvas-print font-effect-canvas-print Chrome, Safari
장작 crackle font-effect-crackle Chrome, Safari
부족 decaying font-effect-decaying Chrome, Safari
파괴 destruction font-effect-destruction Chrome, Safari
고통스러움 distressed font-effect-distressed Chrome, Safari
인스트레이드 목재 distressed-wood font-effect-distressed-wood Chrome, Safari
엠보스 emboss font-effect-emboss Chrome, Firefox, Opera, Safari
화재 fire font-effect-fire Chrome, Firefox, Opera, Safari
불 애니메이션 fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
취약함 fragile font-effect-fragile Chrome, Safari
잔디 grass font-effect-grass Chrome, Safari
얼음 ice font-effect-ice Chrome, Safari
세포 분열 mitosis font-effect-mitosis Chrome, Safari
네온 neon font-effect-neon Chrome, Firefox, Opera, Safari
Outline outline font-effect-outline Chrome, Firefox, Opera, Safari
퍼팅 친환경 putting-green font-effect-putting-green Chrome, Safari
스커핑 스틸 scuffed-steel font-effect-scuffed-steel Chrome, Safari
섀도 다중 항목 shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
스플릿 splintered font-effect-splintered Chrome, Safari
고정 static font-effect-static Chrome, Safari
스톤워시 stonewash font-effect-stonewash Chrome, Safari
3차원 3d font-effect-3d Chrome, Firefox, Opera, Safari
3차원 부동 소수점 수 3d-float font-effect-3d-float Chrome, Firefox, Opera, Safari
빈티지 vintage font-effect-vintage Chrome, Safari
배경화면 wallpaper font-effect-wallpaper Chrome, Safari

글꼴의 스타일을 지정하는 방법은 여러 가지가 있으며 CSS를 통해 다양한 작업을 할 수 있습니다. 시작을 위한 몇 가지 아이디어만 제공해 드립니다. 더 많은 아이디어를 얻으려면 Google에서 'css 텍스트 효과'를 검색하여 이미 웹에 있는 여러 아이디어를 살펴보세요.

추가 자료

  • Google Fonts에서 Google Fonts API가 제공하는 글꼴 모음의 전체 목록을 참고하세요.
  • 웹 글꼴 로더를 사용하여 글꼴 로드를 더 세밀하게 제어하는 방법을 알아보세요.
  • 기술적 고려사항 페이지에서 Google Fonts API 작동 방식을 자세히 알아보세요.