Google Fonts API 시작하기

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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

간단한 예

예를 들면 다음과 같습니다. 다음 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 모노 글꼴의 키릴 문자 하위 집합을 요청하려면 URL은 다음과 같습니다.

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

Roboto 모노 글꼴의 그리스 하위 집합을 요청하려면 URL은 다음과 같습니다.

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

Roboto 모노 글꼴의 그리스어 및 키릴 문자 하위 집합을 모두 요청하는 경우 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에서는 작업을 간소화하기 위해 최소한의 노력으로 멋진 디스플레이 텍스트를 생성할 수 있는 글꼴 효과 모음을 제공했습니다. 예를 들면 다음과 같습니다.

글꼴 효과입니다.

이 베타 기능을 사용하려면 effect=를 Google Fonts API 요청에 추가하고 해당 HTML 이름을 적용하려는 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 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의 작동 방식을 자세히 알아보려면 기술 고려사항 페이지를 참고하세요.