Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
San Francisco Web Font
/** WARNING - USE AT OWN RISK */
/** IT IS AGAINST APPLE'S POLICY TO USE SF PRO FOR ANYTHING OTHER THAN iOS/tvOS/macOS/watchOS DESIGN & DEVELOPMENT */
/** https://sf.abarba.me/font.css */
/** https://sf.abarba.me/LICENSE.pdf */
/** 1. Copy/import this file into your main css/scss file */
/** 2. Change css font-family: to "SF Text", "SF Display" or "SF Mono" */
/** 3. Apply font-weight or italic to html elements */
/** THANK YOU */
/** I host these fonts on Cloudfront with SSL in all AWS regions for the best performance and reliability */
/** If you'd like to help offset costs, I'd very much appreciate a donation via Lisk https://lisk.io */
/** Address: 14987768355736502769L */
/** Delegate: andrew */
/*---------------------------------------------------------------------------*
* SF UI Display
*---------------------------------------------------------------------------*/
/** Black */
@font-face {
font-family: "SF Display";
font-weight: 900;
src: url("https://sf.abarba.me/SF-UI-Display-Black.otf");
}
/** Bold */
@font-face {
font-family: "SF Display";
font-weight: 700;
src: url("https://sf.abarba.me/SF-UI-Display-Bold.otf");
}
/** Heavy */
@font-face {
font-family: "SF Display";
font-weight: 800;
src: url("https://sf.abarba.me/SF-UI-Display-Heavy.otf");
}
/** Light */
@font-face {
font-family: "SF Display";
font-weight: 200;
src: url("https://sf.abarba.me/SF-UI-Display-Light.otf");
}
/** Medium */
@font-face {
font-family: "SF Display";
font-weight: 500;
src: url("https://sf.abarba.me/SF-UI-Display-Medium.otf");
}
/** Regular */
@font-face {
font-family: "SF Display";
font-weight: 400;
src: url("https://sf.abarba.me/SF-UI-Display-Regular.otf");
}
/** Semibold */
@font-face {
font-family: "SF Display";
font-weight: 600;
src: url("https://sf.abarba.me/SF-UI-Display-Semibold.otf");
}
/** Thin */
@font-face {
font-family: "SF Display";
font-weight: 300;
src: url("https://sf.abarba.me/SF-UI-Display-Thin.otf");
}
/** Ultralight */
@font-face {
font-family: "SF Display";
font-weight: 100;
src: url("https://sf.abarba.me/SF-UI-Display-Ultralight.otf");
}
/*---------------------------------------------------------------------------*
* SF UI Text
*---------------------------------------------------------------------------*/
/** Bold */
@font-face {
font-family: "SF Text";
font-weight: 700;
src: url("https://sf.abarba.me/SF-UI-Text-Bold.otf");
}
/** Bold Italic */
@font-face {
font-family: "SF Text";
font-weight: 700;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-BoldItalic.otf");
}
/** Heavy */
@font-face {
font-family: "SF Text";
font-weight: 800;
src: url("https://sf.abarba.me/SF-UI-Text-Heavy.otf");
}
/** Heavy Italic */
@font-face {
font-family: "SF Text";
font-weight: 800;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-HeavyItalic.otf");
}
/** Light */
@font-face {
font-family: "SF Text";
font-weight: 200;
src: url("https://sf.abarba.me/SF-UI-Text-Light.otf");
}
/** Light Italic */
@font-face {
font-family: "SF Text";
font-weight: 200;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-HeavyItalic.otf");
}
/** Medium */
@font-face {
font-family: "SF Text";
font-weight: 500;
src: url("https://sf.abarba.me/SF-UI-Text-Medium.otf");
}
/** Medium Italic */
@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");
}
/** Regular Italic */
@font-face {
font-family: "SF Text";
font-weight: 400;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-RegularItalic.otf");
}
/** Semibold */
@font-face {
font-family: "SF Text";
font-weight: 600;
src: url("https://sf.abarba.me/SF-UI-Text-Semibold.otf");
}
/** Semibold Italic */
@font-face {
font-family: "SF Text";
font-weight: 600;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-SemiboldItalic.otf");
}
/** Ultrathin */
@font-face {
font-family: "SF Text";
font-weight: 100;
src: url("https://sf.abarba.me/SF-UI-Text-Ultrathin.otf");
}
/** Ultrathin Italic */
@font-face {
font-family: "SF Text";
font-weight: 100;
font-style: italic;
src: url("https://sf.abarba.me/SF-UI-Text-UltrathinItalic.otf");
}
/*---------------------------------------------------------------------------*
* SF Mono
*---------------------------------------------------------------------------*/
/** Bold */
@font-face {
font-family: "SF Mono";
font-weight: 700;
src: url("https://sf.abarba.me/SFMono-Bold.otf");
}
/** Bold Italic */
@font-face {
font-family: "SF Mono";
font-weight: 700;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-BoldItalic.otf");
}
/** Heavy */
@font-face {
font-family: "SF Mono";
font-weight: 800;
src: url("https://sf.abarba.me/SFMono-Heavy.otf");
}
/** Heavy Italic */
@font-face {
font-family: "SF Mono";
font-weight: 800;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-HeavyItalic.otf");
}
/** Light */
@font-face {
font-family: "SF Mono";
font-weight: 200;
src: url("https://sf.abarba.me/SFMono-Light.otf");
}
/** Light Italic */
@font-face {
font-family: "SF Mono";
font-weight: 200;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-HeavyItalic.otf");
}
/** Medium */
@font-face {
font-family: "SF Mono";
font-weight: 500;
src: url("https://sf.abarba.me/SFMono-Medium.otf");
}
/** Medium Italic */
@font-face {
font-family: "SF Mono";
font-weight: 500;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-MediumItalic.otf");
}
/** Regular */
@font-face {
font-family: "SF Mono";
font-weight: 400;
src: url("https://sf.abarba.me/SFMono-Regular.otf");
}
/** Regular Italic */
@font-face {
font-family: "SF Mono";
font-weight: 400;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-RegularItalic.otf");
}
/** Semibold */
@font-face {
font-family: "SF Mono";
font-weight: 600;
src: url("https://sf.abarba.me/SFMono-Semibold.otf");
}
/** Semibold Italic */
@font-face {
font-family: "SF Mono";
font-weight: 600;
font-style: italic;
src: url("https://sf.abarba.me/SFMono-SemiboldItalic.otf");
}
@ravijoon

This comment has been minimized.

Copy link

commented Oct 9, 2018

that works.. perfect

@gsc89

This comment has been minimized.

Copy link

commented Oct 22, 2018

Many thanks needed these for a sketchup file a designer passed me for opening on Windows.

@duncannah

This comment has been minimized.

Copy link

commented Nov 25, 2018

Hello, looks like the CORS header isn't set at all, so the browser refuses to use the font. Could you set the header, please?

@AndrewBarba

This comment has been minimized.

Copy link
Owner Author

commented Nov 26, 2018

Hello, looks like the CORS header isn't set at all, so the browser refuses to use the font. Could you set the header, please?

You're the first to report this and people have been using this on sites for quite some time. Can you give me an example?

@ddebin

This comment has been minimized.

Copy link

commented Nov 28, 2018

I have the same problem.

Using Chrome 70.0.3538.110.

Access to font at 'https://sf.abarba.me/SFMono-Semibold.otf' from origin 'https://...' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Or Firefox 63.0.3

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sf.abarba.me/SFMono-Semibold.otf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

@siffash

This comment has been minimized.

Copy link

commented May 22, 2019

@AndrewBarba same problem here, Chrome 74.0.3729.157:

Access to font at 'https://sf.abarba.me/SF-UI-Text-Regular.otf' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
SF-UI-Text-Regular.otf:1 Failed to load resource: net::ERR_FAILED

@AndrewBarba

This comment has been minimized.

Copy link
Owner Author

commented May 22, 2019

@ddebin @siffash I just deployed a configuration update, can you guys try again?

@ddebin

This comment has been minimized.

Copy link

commented May 22, 2019

Yep. Thanks. It's working. @AndrewBarba

@siffash

This comment has been minimized.

Copy link

commented May 22, 2019

@AndrewBarba nope, the problem remained for me.

@siffash

This comment has been minimized.

Copy link

commented May 22, 2019

https://sf.abarba.me/SF-UI-Text-Heavy.otf
this one does not exist on AWS

@AndrewBarba

This comment has been minimized.

Copy link
Owner Author

commented May 22, 2019

@siffash I had to clear the cache, can you try again?

@jazzz13

This comment has been minimized.

Copy link

commented Jun 5, 2019

@siffash I had to clear the cache, can you try again?

Access to font at 'https://sf.abarba.me/SF-UI-Display-Semibold.otf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
chrome Version 74.0.3729.169
=0

@siffash

This comment has been minimized.

Copy link

commented Jun 5, 2019

@siffash I had to clear the cache, can you try again?

Ultimately I ended up using it locally by downloading all needed fonts.

@gopeter

This comment has been minimized.

Copy link

commented Jun 11, 2019

https://gist.github.com/AndrewBarba/2c0f6612ceef30f5f55d#file-sanfrancisco-font-css-L129 should be src: url("https://sf.abarba.me/SF-UI-Text-LightItalic.otf"); :-)

@tnanhpt

This comment has been minimized.

Copy link

commented Jul 7, 2019

Thank you very much

@drichar

This comment has been minimized.

Copy link

commented Jul 31, 2019

https://gist.github.com/AndrewBarba/2c0f6612ceef30f5f55d#file-sanfrancisco-font-css-L238 should be src: url("https://sf.abarba.me/SFMono-LightItalic.otf");

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.