아리따 글꼴 — Arita Webfont CDN
아모레퍼시픽이 만들어 모두에게 나누는 글꼴, 아리따를 CSS 한 줄로 웹에서 사용하세요.
설치도, 파일 다운로드도 필요 없습니다.
사용법
웹페이지 <head>에 링크 한 줄을 넣으면, 방문자의 브라우저가
CDN(jsDelivr)에서 글꼴을 알아서 받아옵니다. 두 단계면 끝납니다.
1. 글꼴 불러오기
쓰고 싶은 글꼴을 골라 <head>에 링크를 추가하세요.
아래는 아리따 돋움 예시입니다. 다른 글꼴은 표에서 CSS 파일명만
바꾸면 됩니다. 필요한 글꼴만 불러와야 페이지가 가볍습니다.
HTML
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@bepyan/arita@latest/dist/dynamic-subset/arita-dotum-dynamic-subset.css"
/>| 글꼴 | font-family |
font-weight |
CSS 파일명 |
|---|---|---|---|
| 아리따 돋움 (한글) | Arita Dotum KR |
100 · 300 · 500 · 600 · 700 | arita-dotum-dynamic-subset.css |
| 아리따 부리 (한글) | Arita Buri KR |
100 · 300 · 500 · 600 · 700 | arita-buri-dynamic-subset.css |
| 아리따 산스 (로마자) | Arita Sans LTN |
100 · 300 · 500 · 600 · 700 | arita-sans-ltn-dynamic-subset.css |
| 아리따 흑체 (중문 간체) | Arita Sans SC |
300 · 500 · 700 | arita-sans-sc-dynamic-subset.css |
굵기 이름 매핑
- Thin/HairLine → 100
- Light → 300
- Medium → 500
- SemiBold → 600
- Bold → 700
어떤 글꼴을 고를지 고민된다면 글꼴 소개에서 표정을 비교해 보세요.
2. 글꼴 적용하기
CSS에서 글꼴을 적용할 곳에 위 표의 font-family 이름을 쓰면 끝입니다.
CSS
body {
font-family: "Arita Dotum KR", sans-serif;
}더 알아보기
기본 방식(dynamic subset)은 글꼴 파일 전체 대신 페이지에 실제 쓰인 글자 조각만 내려받습니다. 한글처럼 글자 수가 많은 글꼴에 특히 유리하고, 따로 설정할 것은 없습니다.
| 용도 | 경로 |
|---|---|
| 모든 글꼴을 한 번에 | dist/dynamic-subset/arita-dynamic-subset.css |
| 글꼴 파일을 통째로 (static) | dist/static/arita-dotum.css 등 파일명 규칙 동일 |
@latest는 항상 최신 배포를 가리킵니다. 프로덕션에서는
특정 버전으로
고정하면 CDN 캐시를 최대(약 1년)로 활용할 수 있습니다 (예: @0.2.0).
글꼴 소개
아리따 돋움
font-family: "Arita Dotum KR"
품격 있는 말씨를 사회와 나누기 위해 2005년 처음 시도한 본문용 글꼴입니다. 직선적이고 딱딱한 기존 돋움체에서 부드러운 곡선이 돋보이는 새로운 표정을 제시했습니다.
아리따 부리
font-family: "Arita Buri KR"
긴 문장에 적합한 본문용 글꼴로 2014년 완성됐습니다. 현대적인 여성의 단아하고 지적인 멋스러움을 담았으며, 국내 최초로 머리카락같이 가는 헤어라인 서체를 개발했습니다.
아리따 산스
font-family: "Arita Sans LTN"
2012년 선보인 아리따 글꼴의 첫 로마자 서체입니다. 휴머니스트 산세리프 계열로 부드럽고 우아한 표정을 지니고 있습니다.
아리따 흑체
font-family: "Arita Sans SC"
국내 첫 중문 기업 서체로, 아모레퍼시픽이 추구하는 현대적인 여성의 아름다움을 담았습니다. 2016년 본문용 굵기를 시작으로 두 굵기를 더해 2017년 3종이 완성됐습니다.