이 가이드에서는 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를 사용할 수 있습니다.
스타일시트 링크를 추가하여 원하는 웹 글꼴을 요청합니다.
<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을 결정하려면 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 작동 방식을 자세히 알아보세요.