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

114

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í.

css inorgánico
fuente
1
Las fuentes del sitio web dependen de lo que esté instalado en el sistema del usuario o se cargan externamente. Es algo bastante sencillo, especialmente si la fuente está disponible para su uso.
Sparky

Respuestas:

210

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/

inorgánico
fuente
o simplemente puede usar nombres de fuente comoSanFranciscoText-Regular
4
Si necesita números monoespaciados para mostrar en la tabla, -apple-systemtambién lo admite a través de CSS font-variant-numeric: tabular-nums;.
Palimondo
@ j08691, ¿Cuál es la licencia?
Pacerier
1
@BryanBryce Eso fue un truco para El Cap. Ya no funciona, creo que se llama .SF NS Texty .SF NS Displayahora, pero no deberías usarlos. Yo usaría -apple-system. SF Text/ SF Profunciona solo si tiene la fuente instalada manualmente.
1
Aparentemente -system-uies la nueva forma estándar en Chrome y Safari. (No quería robar el crédito de tu increíble respuesta, así que solo pongo esto en los comentarios. Furbo.org/2018/03/28/system-fonts-in-css )
Wil Shipley
65

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

Ilias Karim
fuente
3
Si alguien quería uno audaz: sanfranciscodisplay-bold-webfont.woff
Snow Bases
11
Nota: esta respuesta viola los términos de la licencia de fuentes de Apple , que establecen que "[...] puede usar la fuente de Apple únicamente para crear modelos de interfaces de usuario que se utilizarán en productos de software que se ejecutan en iOS, iPadOS, macOS o tvOS de Apple. sistemas operativos, según corresponda " .
Jue
36

Ú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 .


fuente
¿Estás seguro de que en realidad se está usando San Francisco para renderizar en iOS? En iOS 12 (Simulador) no lo parece; en iOS 13 lo parece, pero no todos los glifos están disponibles .
Fabien Snauwaert
@FabienSnauwaert, no, no estoy seguro acerca de iOS 12 y 13. Es por eso que agregué la fecha en la parte superior de la respuesta (es decir, la respuesta tiene más de 2 años y se publicó antes de que se anunciara iOS 12).
26

-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.

Andreas Kwiatkowski
fuente
10

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

font-family: 'BlinkMacSystemFont';
Benjamín
fuente
3
¿Tiene un enlace a alguna documentación oficial (o de otro tipo) sobre esto?
Moshe Katz
4

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";
}
dors
fuente
¿Qué pasa con el lienzo HTML?
clearlight
4

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.

jhohlfeld
fuente
3
En la respuesta aceptada, puede ver que no estamos sirviendo fuentes web de Apple, le estamos diciendo al navegador que use la fuente del sistema Apple, que actualmente es SF. Ciertamente no puede servir SFPro, pero puede especificar que se use para personas con dispositivos Apple.
inorganik
4

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';
theroyakash
fuente
2

Ú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; }
bumfo
fuente
1
Un bloque de código por sí solo no proporciona una buena respuesta. Por favor agregue explicaciones.
Louis Barranqueiro
1
Este es el único que funcionó para mí en una hoja de estilo de sintaxis Atom.
Kai
2
Tenga en cuenta que esto no funciona en iOS, mientras que -apple-system, 'BlinkMacSystemFont'funciona en iOS Chrome + Safari y OS X Chrome + Safari.
Charlie Schliesser
1
Además, debo señalar que la razón por la que esto no funciona en iOS es porque las fuentes del sistema comienzan con .SFNS en macOS mientras que comienzan con .SFUI en iOS. Si es absolutamente necesario hacer esto por alguna razón, eso lo solucionaría ... ¡pero no lo haga!
Jonathan Thornton
1
gracias, lo he aplicado a la fuente SF y está funcionando muy bien. El problema con -apple-system se aplica a todo el contenido y anula el estilo de la familia de fuentes.
Hardik Darji