이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Google Fonts API 시작하기

이 가이드에서는 Google Fonts API를 사용하여 웹에 글꼴을 추가하는 방법을 설명합니다. 페이지를 참조하세요. 프로그래밍을 할 필요가 없습니다. 맞춤 매개변수를 추가하기만 하면 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 사용을 시작할 수 있습니다.

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

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

요청된 웹 글꼴을 사용하여 요소 스타일을 지정합니다(스타일시트에서 다음 중 한 가지).
```
.css-selector {
font-family: 'Font Name', serif;
}
```
또는 요소 자체에서 인라인 스타일을 사용하여 지정할 수 있습니다.
```
<div style="font-family: 'Font Name', serif;">Your text</div>
```

를 통해 개인정보처리방침을 정의할 수 있습니다.

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

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

스타일시트 링크에서 사용할 URL을 결정하려면 Fonts API 기본 URL:

https://fonts.googleapis.com/css

그런 다음 하나 이상의 글꼴 모음 이름 및 글꼴 모음과 함께 family= URL 매개변수를 추가합니다. 있습니다.

예를 들어 Inconsolata 글꼴:

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

드림

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

예를 들어 오렌지색, 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`

예를 들어 칸타렐 기울임꼴과 드로이드 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를 사용하는 것이 적합합니다.

querystring 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 글꼴

글꼴 요청 최적화

웹사이트나 애플리케이션에서 웹 글꼴을 사용하고자 할 때 어떤 글자가 필요할지 미리 알 수 있습니다. 이러한 문제는 주로 웹 글꼴을 로고 또는 제목에 사용할 수 있습니다.

이 경우 글꼴에 text= 값을 지정하는 것이 좋습니다. 요청 URL을 지정합니다. 이렇게 하면 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에 effect=을(를) 추가하세요. API 요청과 해당 클래스 이름을 필요한 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`	크롬, Safari
캔버스 인화	`canvas-print`	`font-effect-canvas-print`	크롬, Safari
장난감	`crackle`	`font-effect-crackle`	크롬, Safari
붕괴	`decaying`	`font-effect-decaying`	크롬, Safari
파괴	`destruction`	`font-effect-destruction`	크롬, Safari
고통스러운 느낌	`distressed`	`font-effect-distressed`	크롬, Safari
고장난 목재	`distressed-wood`	`font-effect-distressed-wood`	크롬, 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`	크롬, Safari
그래스	`grass`	`font-effect-grass`	크롬, Safari
얼음	`ice`	`font-effect-ice`	크롬, Safari
유타 분열	`mitosis`	`font-effect-mitosis`	크롬, Safari
네온	`neon`	`font-effect-neon`	Chrome, Firefox, Opera, Safari
윤곽선	`outline`	`font-effect-outline`	Chrome, Firefox, Opera, Safari
친환경	`putting-green`	`font-effect-putting-green`	크롬, Safari
스커프 스틸	`scuffed-steel`	`font-effect-scuffed-steel`	크롬, Safari
섀도 멀티플	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
분절됨	`splintered`	`font-effect-splintered`	크롬, Safari
고정	`static`	`font-effect-static`	크롬, Safari
Stonewash	`stonewash`	`font-effect-stonewash`	크롬, 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`	크롬, Safari
배경화면	`wallpaper`	`font-effect-wallpaper`	크롬, Safari

글꼴에 스타일을 지정하는 방법에는 여러 가지가 있으며 여러 가지 방법이 있습니다. 있습니다. 시작을 위한 몇 가지 아이디어를 제공해 드리려고 합니다. 자세한 내용은 Google 검색을 사용해 보세요. 'css text Effects' 및 이미 웹에 있는 아이디어를 검색해 보세요.

추가 자료

Google Fonts API에서 제공하는 전체 글꼴 모음 목록은 Google 글꼴
웹 글꼴 로더를 사용하여 더 세밀하게 제어할 수 있습니다.
Google Fonts API 작동 방식에 대해 자세히 알아보려면 기술적 고려사항 페이지를 참조하세요.