lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>구글 웹폰트 예제</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>구글 웹폰트 예제</h1>
    <h2>이 문장은 Nanum Pen Script 폰트로 작성되었습니다.</h2>
  </body>
</html>

# 폰트 불러오기 (구글 웹폰트)

웹 페이지 내 모든 요소들이 브라우저 기본 글씨체만 사용한다면 너무 지루하겠죠?

`구글 웹폰트`는 무료로 사용할 수 있는 다양한 웹폰트를 제공합니다.

<br />

1. **웹폰트 선택하기**

폰트를 추가하는 방법은 여러 가지가 있지만, 이번 수업에서는 `HTML 문서의 <head>` 부분에 `<link>` 태그로 폰트를 추가하는 방법을 소개합니다.

먼저 [[구글 웹폰트](https://fonts.google.com/)] 사이트에 방문해서 마음에 드는 폰트를 선택해 보세요.

<br />

2. **웹페이지에 폰트 불러오기**

선택한 폰트의 `URL 주소 입력창`에서 불러올 때 사용하는 `폰트 이름`(예: Sunflower, Nanum+Pen+Script, Noto+Sans+KR)을 복사해서 `<link>` 태그의 `href` 속성에 추가하면 됩니다.

폰트 이름은 href 속성의 값에서 `family=` 뒤에 붙여 넣으면 됩니다.

예를 들어 아래 코드의 `href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script"`와 같이 Nanum Pen Script 폰트를 불러올 수 있습니다.

```html title="HTML"
<!DOCTYPE html>
<html>
  <head>
    
    
    <link
      href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script"
      rel="stylesheet"
    />
  </head>
  <body>
    ...
  </body>
</html>
```

- `Noto Sans KR`와 같이 띄어쓰기가 포함된 폰트를 불러올 경우, `family=Noto+Sans+KR"`와 같이 띄어쓰기를 `+`로 대체해야 합니다.

- 일부 폰트는 한글을 지원하지 않을 수 있습니다. 웹폰트 필터에서 `Korean`을 선택하면 한글을 지원하는 폰트만 볼 수 있습니다.

<br />

3. **CSS에서 폰트 사용하기**

폰트 링크를 추가한 후, CSS에서 해당 폰트를 사용하려면 `font-family` 속성을 통해 폰트 이름을 지정하면 됩니다.

## 예시 코드:

```css title="CSS"
body {
  font-family: 'Nanum Pen Script', sans-serif; /* 'Nanum Pen Script' 폰트 사용을 시도하고, 폰트가 없으면 기본 sans-serif 폰트 사용 */
}
```

font-family 안의 폰트 이름은 `+`를 제외한 폰트 이름을 사용하면 됩니다.

(예: `Nanum+Pen+Script` -> `Nanum Pen Script`)