아리따

아모레퍼시픽의 나눔 글꼴 아리따(Arita)를 링크 한 줄로 불러오는 비공식 웹폰트 CDN입니다.

아리따 글꼴 — Arita Webfont CDN

활자 견본Type Specimen

아리따 네 글꼴의 굵기별 견본과 메타데이터
Thin · HairLine 100아리따돋움아리따부리Arita Sans
Light 300아리따돋움아리따부리Arita Sans阿丽达黑体
Medium 500아리따돋움아리따부리Arita Sans阿丽达黑体
SemiBold 600아리따돋움아리따부리Arita Sans
Bold 700아리따돋움아리따부리Arita Sans阿丽达黑体
Name of Typeface아리따 돋움한글아리따 부리한글아리따 산스라틴아리따 흑체중문 간체
DirectorAhn Sang-soo · Han Jae-joonAhn Sang-soo · Han Jae-joonAhn Sang-soo · Michel de BoerAhn Sang-soo · Zhu Zuwei
DesignLee Yong-jaeRyu Yang-heePeter VerheulLiu Yu · Liu Yanran · Zhang Xuan
TypeformatOTF · TTFOTF · TTFOTF (CFF)OTF · TTF
Number of Characters한글 11,172로마자 94심벌 989한글 11,172로마자 94심벌 1,028추가 글리프 2로마자 52확장 로마자 50심벌 86간체 6,763번체 2,114국제 심벌 1,103대체 글리프 13CJK 호환 한자 383

사용법Getting Started

1 · 글꼴 불러오기

필요한 글꼴의 CSS 링크를 <head>에 추가하세요.

글꼴 선택
선택글꼴font-familyfont-weightCSS 파일명
Arita Dotum KR100 · 300 · 500 · 600 · 700arita-dotum-dynamic-subset.css
Arita Buri KR100 · 300 · 500 · 600 · 700arita-buri-dynamic-subset.css
Arita Sans LTN100 · 300 · 500 · 600 · 700arita-sans-ltn-dynamic-subset.css
Arita Sans SC300 · 500 · 700arita-sans-sc-dynamic-subset.css

HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-buri-dynamic-subset.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-sans-ltn-dynamic-subset.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-sans-sc-dynamic-subset.css"
/>

2 · 글꼴 적용하기

선택한 글꼴을 CSS에 적용하세요.
기본 굵기로는 font-weight: 500(Medium)을 권장합니다.

CSS

body {
  font-family: "Arita Dotum KR", sans-serif;
  font-weight: 500;
}
body {
  font-family: "Arita Buri KR", sans-serif;
  font-weight: 500;
}
body {
  font-family: "Arita Sans LTN", sans-serif;
  font-weight: 500;
}
body {
  font-family: "Arita Sans SC", sans-serif;
  font-weight: 500;
}

더 알아보기

기본 방식(dynamic subset)은 글꼴 파일 전체 대신 페이지에 실제 쓰인 글자 조각만 내려받습니다. 한글처럼 글자 수가 많은 글꼴에 특히 유리하고, 따로 설정할 것은 없습니다. 전송량이 얼마나 줄어드는지는실측 비교에서 확인할 수 있습니다.

용도경로
모든 글꼴을 한 번에dist/dynamic-subset/arita-dynamic-subset.css
글꼴 파일을 통째로 (static)dist/static/arita-dotum.css 등 파일명 규칙 동일
모든 글꼴을 통째로dist/static/arita.css

문서Guides