Me gustaría usar la nueva fuente San Francisco en un sitio. He intentado:

font: 'San Francisco', Helvetica, Arial, san-serif;

en vano. He probado las respuestas a esta pregunta , pero @font-faceno es la solución aquí.

La nueva fuente del sistema de Apple no se expone públicamente. Apple ha comenzado a abstraer los nombres de las fuentes del sistema:

La motivación de esta abstracción es que el sistema operativo pueda tomar mejores decisiones sobre qué cara usar con un peso determinado. Apple también está trabajando en funciones de fuentes, como glifos "6" y "9" seleccionables o números no monoespaciados. Supongo que a ellos también les gustaría llevar estas funciones a la web.

Safari y Firefox usan SF para -apple-system; Chrome reconoce BlinkMacSystemFont:

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

También hay otras variaciones:

font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

Puede hacer una demostración de estos en el siguiente violín; la mayoría aún no son compatibles: http://jsfiddle.net/v94gw9nx/

Obtuve mi información del artículo de Craig Hockenberry que tiene mucha información excelente sobre el uso de la fuente: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Además, información excelente en el blog de Surfin 'Safari sobre el uso de fuentes de sistema abstractas: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

Y aparentemente Apple está trabajando con el W3C para estandarizar usando un nombre de fuente de "sistema" genérico en CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Descargue los archivos .otf de fuente SF para su uso personal: https://developer.apple.com/fonts/

Ninguna de las respuestas actuales, incluida la aceptada , utilizará la fuente San Francisco de Apple en sistemas que no la tengan instalada como fuente del sistema. Dado que la pregunta no es "cómo uso la fuente del sistema OS X en una página web", la solución correcta es usar fuentes web:

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

Fuente

Última prueba: marzo de 2018

Para abordar la pregunta

Cómo usar la nueva fuente San Francisco de Apple en una página web

font-family: -apple-system, system-ui, BlinkMacSystemFont;

o (incluso más corto):

font-family: -apple-system, BlinkMacSystemFont;

debería ser suficiente.

Sin embargo, si desea utilizar la fuente del sistema de forma predeterminada en varias plataformas, le sugiero:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

• -apple-system- San Francisco en Safari (en Mac OS X e iOS); Neue Helvetica y Lucida Grande en versiones anteriores de Mac OS X.
• system-ui - fuente de interfaz de usuario predeterminada en una plataforma determinada.
• BlinkMacSystemFont- equivalente a -apple-system, para Chrome en Mac OS X.
• "Segoe UI" - Windows (Vista +) y Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) y Chrome OS.
• Ubuntu - todas las versiones de Ubuntu.

La idea está tomada del siguiente número en github .

Puede buscar fuentes para otros sistemas operativos o versiones anteriores de ellos en este artículo sobre trucos css .

-apple-system te permite elegir San Francisco en Safari. BlinkMacSystemFont es la alternativa correspondiente para Chrome.

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

Roboto o Helvetica Neue podrían insertarse como alternativas incluso antes de sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (cómo o previamente http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / hago un gran trabajo explicando los detalles.

Si el usuario está ejecutando El Capitan o superior, funcionará en Chrome con

font-family: 'BlinkMacSystemFont';

Apple está abstrayendo las fuentes del sistema en el futuro. Esta instalación utiliza un nuevo sistema de nombre de familia genérico -apple-system. Entonces, algo como a continuación debería proporcionarle lo que desea.

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

Esta es una actualización de esta pregunta bastante antigua. Quería usar las nuevas fuentes SF Pro en un sitio web y no encontré fuentes CDN, además de las mencionadas anteriormente (applesocial.s3.amazonaws.com).

Claramente, este no es un repositorio de contenido oficial aprobado por Apple. En realidad, no encontré NINGÚN repositorio de fuentes oficial que sirva a las fuentes de Apple, listo para ser utilizado por desarrolladores web.

Y hay una razón, si lee el acuerdo de licencia que viene con la descarga del nuevo SF Pro y otras fuentes de https://developer.apple.com/fonts/ , dice en los primeros párrafos muy claramente:

[...] puede utilizar la fuente Apple únicamente para crear modelos de interfaces de usuario que se utilizarán en productos de software que se ejecutan en los sistemas operativos iOS, macOS o tvOS de Apple, según corresponda. El derecho anterior incluye el derecho a mostrar la fuente Apple en capturas de pantalla, imágenes, maquetas u otras representaciones, digitales y / o impresas, de dichos productos de software que se ejecutan únicamente en iOS, macOS o tvOS. [...]

Y:

Salvo que se disponga expresamente en este documento, no puede utilizar la fuente Apple para crear, desarrollar, mostrar o distribuir de otro modo documentación, material gráfico, contenido del sitio web o cualquier otro producto de trabajo.

Más lejos:

Salvo que se permita expresamente lo contrario [...] (i) solo un usuario puede usar la fuente Apple a la vez, y (ii) no puede hacer que la fuente Apple esté disponible en una red en la que pueda ser ejecutada o utilizada por varias computadoras al mismo tiempo.

No más preguntas para mí. Apple claramente no quiere que sus fuentes se compartan en la web fuera de sus productos.

No puede utilizar la fuente del sistema Apple servida directamente desde una base de datos. Va en contra de la licencia, pero puede usar esto para sistemas Mac superiores a High Sierra

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

O puedes usar esto:

font-family: 'BlinkMacSystemFont';

Última prueba en 2015

Debería usar esta solución como última opción, cuando otras soluciones no funcionan.

Respuesta original:

Trabajar en macOS Chrome / Safari

body { font-family: '.SFNSDisplay-Regular', sans-serif; }