콘텐츠로 이동
Delivery API
기능을 전제로 계획하기 전에 기능 현황을 확인하세요.

가이드디자인

글꼴

라이선스가 있는 웹 폰트를 한 번만 업로드하고, 라이선스 증빙을 함께 보관하고, 스타일시트 하나로 웹사이트에 불러오세요.

이 페이지는 영어에서 번역되었습니다. 내용이 다를 경우 영어 버전이 우선합니다. 영어로 읽기

Atlas는 웹사이트의 글꼴을 라이선스 증빙과 함께 호스팅합니다. 글꼴은 라이선스가 웹 임베딩을 허용하고 만료되지 않은 동안에만 제공됩니다.

Design → Fonts를 열고 Add a font를 클릭합니다.

  1. Family name과 Key를 입력합니다. 키는 CSS 변수의 이름이 되며 나중에 변경할 수 없습니다.

  2. Files, weights and styles에서 WOFF2 또는 WOFF 파일을 업로드합니다(또는 미디어 라이브러리에서 선택). 각 파일에 Weight(예: 400, 가변 글꼴이면 100-900 같은 범위)와 Style(Upright 또는 Italic)을 설정합니다.

  3. Fallback fonts를 추가하고 While loading을 선택합니다. Show the fallback, then swap 또는 Use the font only if it is ready at once입니다.

  4. Licence에서 Licence 이름, Licence ends 날짜(있는 경우), Evidence, 선택 사항인 Licence document를 기록하고 **The licence allows embedding this font on websites (@font-face)**에 체크합니다.

  5. Add font를 클릭합니다.

각 글꼴 카드에는 font-family: var(--atlas-font-brand) 같은 사용법과 함께 폴백, 라이선스, 이전 버전이 표시됩니다. 파일을 교체하거나 라이선스를 업데이트하려면 New version을 클릭하세요. 이전 버전은 보관됩니다.

Add to your website 카드가 바로 쓸 수 있는 스니펫을 제공합니다.

  • Any website: Copy link tag를 눌러 페이지 head에 추가합니다. 사이트의 모든 활성 글꼴을 담은 스타일시트 하나를 불러옵니다.
  • Next.js: 서버 렌더링 버전은 Copy code를 사용합니다.
<link
rel="stylesheet"
href="https://<delivery host>/v1/delivery/environments/{environmentId}/fonts.css"
/>

모든 파일 버전에 고유한 주소가 있으므로 스타일시트는 5분간 캐시되고 글꼴 파일은 영구 캐시됩니다. 글꼴 파일은 환경의 웹사이트 주소에만 제공됩니다.

글꼴 변경은 콘텐츠처럼 다음 릴리스와 함께 프로덕션에 도달합니다. 프로덕션은 라이브 릴리스에 포함된 글꼴 버전만 제공합니다.

  • WOFF2와 WOFF만 지원합니다(TTF, OTF 불가).
  • 글꼴당 최대 32개의 파일과 8개의 폴백 글꼴.
  • 글꼴은 하나의 사이트에 속합니다. 아직 조직 공유 글꼴 카탈로그와 서브셋 기능은 없습니다.