Skip to content

Instantly share code, notes, and snippets.

@guangxu-li
Forked from OutThisLife/sanfrancisco-font.css
Last active September 28, 2020 22:27
Show Gist options
  • Select an option

  • Save guangxu-li/9a00460ad24a383667219d1751767aa5 to your computer and use it in GitHub Desktop.

Select an option

Save guangxu-li/9a00460ad24a383667219d1751767aa5 to your computer and use it in GitHub Desktop.
San Francisco Web Font
@font-face {
font-family: "SF Display";
font-weight: 900;
src: url("https://sf.abarba.me/SF-UI-Display-Black.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 700;
src: url("https://sf.abarba.me/SF-UI-Display-Bold.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 800;
src: url("https://sf.abarba.me/SF-UI-Display-Heavy.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 200;
src: url("https://sf.abarba.me/SF-UI-Display-Light.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 500;
src: url("https://sf.abarba.me/SF-UI-Display-Medium.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 400;
src: url("https://sf.abarba.me/SF-UI-Display-Regular.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 600;
src: url("https://sf.abarba.me/SF-UI-Display-Semibold.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 300;
src: url("https://sf.abarba.me/SF-UI-Display-Thin.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 100;
src: url("https://sf.abarba.me/SF-UI-Display-Ultralight.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 700;
src: url("https://sf.abarba.me/SF-UI-Text-Bold.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 700;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-BoldItalic.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 800;
src: url("https://sf.abarba.me/SF-UI-Text-Heavy.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 800;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-HeavyItalic.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 200;
src: url("https://sf.abarba.me/SF-UI-Text-Light.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 200;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-HeavyItalic.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 500;
src: url("https://sf.abarba.me/SF-UI-Text-Medium.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 500;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-MediumItalic.otf");
}
/** Regular */
@font-face {
font-family: "SF Text";
font-weight: 400;
src: url("https://sf.abarba.me/SF-UI-Text-Regular.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 400;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-RegularItalic.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 600;
src: url("https://sf.abarba.me/SF-UI-Text-Semibold.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 600;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-SemiboldItalic.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 100;
src: url("https://sf.abarba.me/SF-UI-Text-Ultrathin.otf");
}
@font-face {
font-family: "SF Text";
font-weight: 100;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-UltrathinItalic.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 700;
src: url("https://sf.abarba.me/SFMono-Bold.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 700;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-BoldItalic.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 800;
src: url("https://sf.abarba.me/SFMono-Heavy.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 800;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-HeavyItalic.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 200;
src: url("https://sf.abarba.me/SFMono-Light.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 200;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-HeavyItalic.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 500;
src: url("https://sf.abarba.me/SFMono-Medium.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 500;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-MediumItalic.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 400;
src: url("https://sf.abarba.me/SFMono-Regular.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 400;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-RegularItalic.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 600;
src: url("https://sf.abarba.me/SFMono-Semibold.otf");
}
@font-face {
font-family: "SF Mono";
font-weight: 600;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-SemiboldItalic.otf");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment