CSS
font-family: 'SF UI Text';
link
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText.css" type="text/css"/>
import
@import url('https://cdn.jsdelivr.net/npm/fonts-archive-sfuitext/SFUIText.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');
}