Pretendard ์๊ฐ
์น์์ ํ๊ธ์ ๊น๋ํ๊ฒ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ ๊ฐ์ฅ ๋ง์ด ์ฐ์ด๋ ์คํ์์ค ํฐํธ ์ค ํ๋๊ฐ Pretendard์์.
- ์ฐ๋ × OrionCactus์์ ๋ง๋ ๋ฌด๋ฃ ๊ณต๊ฐ ํฐํธ
- ๊ตฌ๊ธ Noto Sans๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๊ตญ์ด ๊ฐ๋ ์ฑ์ ๊ฐ์
- ์นํฐํธ, ๋ฐ์คํฌํ์ฉ, ๋ชจ๋ฐ์ผ๊น์ง ๋ค์ํ ํ๊ฒฝ์์ ์ฌ์ฉ ๊ฐ๋ฅ
- ๊ฐ๋ณ ํฐํธ(Variable Font) ์ง์ → ๋ธ๋ผ์ฐ์ ์์ ๋ ์ต์ ํ๋ ๋ ๋๋ง
๊ณต์ ์ ์ฅ์: GitHub - orioncactus/pretendard
GitHub - orioncactus/pretendard: ์ด๋ ํ๋ซํผ์์๋ ์ฌ์ฉํ ์ ์๋ system-ui ๋์ฒด ๊ธ๊ผด | A system-ui alternativ
์ด๋ ํ๋ซํผ์์๋ ์ฌ์ฉํ ์ ์๋ system-ui ๋์ฒด ๊ธ๊ผด | A system-ui alternative font for all cross-platform - orioncactus/pretendard
github.com
CDN์ผ๋ก ์ ์ฉํ๊ธฐ ( ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ)
HTML <head>์ ์๋ ์ฝ๋๋ฅผ ์ถ๊ฐํ๋ฉด ๋ฐ๋ก ์ ์ฉํ ์ ์์ต๋๋ค.
<link rel="stylesheet" as="style" crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />๊ทธ๋ค์ CSS์์ font-family๋ฅผ ์ง์ ํฉ๋๋ค:
body {
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
"Noto Sans KR", sans-serif;
}๐ ์ด๋ ๊ฒ ํ๋ฉด Pretendard๊ฐ ์ฐ์ ์ ์ฉ๋๊ณ , ํฐํธ๋ฅผ ๋ถ๋ฌ์ฌ ์ ์๋ ๊ฒฝ์ฐ ์์คํ ๊ธฐ๋ณธ ๊ธ๊ผด๋ก fallback ๋ฉ๋๋ค.
npm / yarn ์ค์น ๋ฐฉ๋ฒ (ํ๋ก์ ํธ์ฉ)
React, Vue ๊ฐ์ ํ๋ก ํธ์๋ ํ๋ก์ ํธ์์๋ npm ํจํค์ง๋ก ์ค์นํ ์ ์์ต๋๋ค.
npm install pretendard --save@import "pretendard/dist/web/static/pretendard.css";์ง์ ๋ค์ด๋ก๋ํด์ ์ ์ฉํ๊ธฐ
CDN์ ์ฐ๊ธฐ ์ด๋ ต๊ฑฐ๋, ์์ฒด ํธ์คํ ํ๊ณ ์ถ๋ค๋ฉด ํฐํธ๋ฅผ ์ง์ ๋ด๋ ค๋ฐ์ ์ ์ฉํ ์๋ ์์ต๋๋ค.
- Pretendard Release ํ์ด์ง์์ OTF/TTF ํ์ผ ๋ค์ด๋ก๋
- ํ๋ก์ ํธ fonts/ ํด๋์ ์ ์ฅ
- CSS์ @font-face ์ ์ธ ์ถ๊ฐ:
@font-face {
font-family: "Pretendard";
src: url("/fonts/Pretendard-Regular.woff2") format("woff2"),
url("/fonts/Pretendard-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
์ ์ฉ ์ ์ฃผ์์ฌํญ
- ์ฑ๋ฅ ๊ณ ๋ ค: ์นํฐํธ๋ ๋ก๋ฉ ์๋์ ์ํฅ์ ์ค ์ ์์ผ๋, CDN ์ฌ์ฉ์ ์ถ์ฒํฉ๋๋ค.
- ๊ฐ๋ณ ํฐํธ: Pretendard๋ Variable Font ๋ฒ์ ๋ ์ง์ํ๋ฏ๋ก ์ต์ ๋ธ๋ผ์ฐ์ ์์ ๋ ์ต์ ํ๋ฉ๋๋ค.
- Fallback ์ค์ : ํ๊ตญ์ด/์๋ฌธ ํผ์ฉ ํ๊ฒฝ์์๋ Pretendard, system-ui, sans-serif ๊ฐ์ด ์ฌ๋ฌ ๊ธ๊ผด์ ํจ๊ป ์ง์ ํ์ธ์.
'๐ฅ๏ธ ํ๋ก ํธ์๋ > ๐จํผ๋ธ๋ฆฌ์ฑ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| # ์ต์ ์ ์ด์ฟผ๋ฆฌ(jQuery), ์ ์ด์ฟผ๋ฆฌ UI CDN (0) | 2025.09.10 |
|---|---|
| # jQuery๋ก ๋ง๋๋ ์ปค์คํ ๋ค์ค ์ ํ select ๋ฐ์ค! (๋ผ์ด๋ธ๋ฌ๋ฆฌ X) (2) | 2025.09.01 |
| # CSS - placeholder ์์ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ (2) | 2025.09.01 |
| # spring boot TailwindCSS์ ์ฐ๋ํ๊ธฐ, ์ฌ์ฉ๋ฐฉ๋ฒ (7) | 2025.07.07 |
| # css ์ค๋ฐ๊ฟ ์์ฑ (ํ ์คํธ๊ฐ ๊ธธ์ด์ง๋ฉด ...๋ก ๋์ค๊ฒ ์ค์ ) ๋ชจ์ (0) | 2025.06.05 |
