SF UI Text

배포처 바로가기

웹 폰트

사용하는 font-family의 이름은 SF UI Text입니다.

HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText.css"
  type="text/css"
/>

CSS @Import

@import url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText.css");

CSS @font-face

/* normal */
@font-face {
  font-family: "SF UI Text";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Light.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Light.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Light.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Regular.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Regular.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Regular.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Medium.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Medium.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Medium.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Semibold.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Semibold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Semibold.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Bold.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Bold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-Bold.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-ExtraBold.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-ExtraBold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText-ExtraBold.ttf")
      format("truetype");
}

/* italic */
@font-face {
  font-family: "SF UI Text";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Light.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Light.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Light.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Regular.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Regular.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Regular.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Medium.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Medium.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Medium.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Semibold.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Semibold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Semibold.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Bold.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Bold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-Bold.ttf")
      format("truetype");
}
@font-face {
  font-family: "SF UI Text";
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-ExtraBold.woff2")
      format("woff2"), url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-ExtraBold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUITextItalic-ExtraBold.ttf")
      format("truetype");
}

font-family

어느 브라우저나 시스템 환경에서도 동일한 폰트가 적용되어야 한다면 아래와 같이 구성하는 걸 추천합니다. -apple-system과 BlinkMacSystemFont는 맥, Segoe UI는 윈도우, Roboto는 안드로이드의 기본 폰트입니다.

font-family: "SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

라이선스

라이선스는 언제든지 변경될 수 있습니다. 변경사항을 확인하려면 배포처를 방문해 주세요.

This San Francisco Font (the “Apple Font”) is licensed to you by Apple Inc. (“Apple”) in consideration of your agreement to the following terms and the terms of the License Agreement for the Apple San Francisco Font that was presented upon the downloading of the Apple Font. If you do not agree with these terms and the terms of the License Agreement for the Apple San Francisco Font, do not use the Apple Font.

You may use the Apple Font solely for creating mock-ups of user interfaces to be used in software products running on Apple’s iOS or OS X operating systems, as applicable. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS or OS X.

The grants set forth in this License do not permit you to, and you agree not to, install, use or run the Apple Font for the purpose of creating mock-ups of user interfaces to be used in software products running on any non-Apple operating system or to enable others to do so. You may not embed the Apple Font in any software programs or other products. Except as expressly provided for herein, you may not use the Apple Font to, create, develop, display or otherwise distribute any documentation, artwork, website content or any other work product.

You may use the Apple Font: (i) only for the purposes described in this License and the License Agreement for the Apple San Francisco Font; and (ii) only if you are a Registered Apple Developer and an eligible paid Apple Developer Program member, or as otherwise expressly permitted by Apple in writing.

San Francisco is a trademark of Apple Inc.

© 2015 Apple Inc. All rights reserved.