# Fonts
URL: /react/getting-started/styling/fonts
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/getting-started/styling/fonts.mdx

SEED가 제공하는 권장 폰트 스택을 애플리케이션에 적용하는 방법을 알아봅니다.

## 개요

`@seed-design/css`는 권장 폰트 스택을 `--seed-font-family` 변수로 제공합니다. 어떤 글꼴을 권장하는지와 그 이유는 [Typography](/foundations/typography)에서 다룹니다.

```css
--seed-font-family:
  -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
  "Pretendard Variable", Pretendard, "Segoe UI", Roboto, "Helvetica Neue",
  Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol", "Noto Color Emoji";
```

SEED는 이 값을 어디에도 자동으로 적용하지 않으므로, 적용할 지점은 직접 선택해야 합니다. `base.css`나 `all.css`를 불러온 뒤 다음과 같이 참조합니다.

```css title="style.css"
body {
  font-family: var(--seed-font-family);
}
```

## `html`이 아니라 `body`에 선언하기

[번들러 플러그인](/react/getting-started/installation/vite)의 `fontScaling` 옵션을 켜면, SEED가 iOS에서 다음 규칙을 적용합니다.

```css
@supports (font: -apple-system-body) {
  html[data-seed-platform="ios"][data-seed-font-scaling="enabled"] {
    font: -apple-system-body;
  }
}
```

이때 `font`가 shorthand로서 `font-family`까지 함께 설정하므로, `fontScaling`을 사용한 환경에서는 `html`에 직접 선언한 `font-family`가 이 규칙에 덮여 무시될 수 있습니다.

- `base.css`를 사용하는 경우, `font-family`를 `body`에 선언해야 합니다.
- `base.layered.css`([Cascade Layers](/react/getting-started/styling/cascade-layers))를 사용하는 경우, `font-family`를 `body`에 선언하는 것을 권장합니다. `html`에 선언해야 한다면, 레이어 밖(unlayered)에 두거나 `seed-base` 이후 레이어에 선언하세요.

## Windows에서 Pretendard 보여주기

Windows에서 맑은 고딕 대신 Pretendard를 보여주려면 제품이 `--seed-font-family`를 사용하는 동시에 Pretendard 웹폰트를 직접 로드해야 합니다. `--seed-font-family`는 권장 이름을 나열할 뿐 폰트를 내려받지 않습니다.

일반적으로 여러 글꼴 두께를 사용하므로 가변 다이나믹 서브셋을 권장합니다. 자세한 내용은 [Pretendard](https://github.com/orioncactus/pretendard) 프로젝트를 참고하세요.