Eu gostaria de usar a nova fonte de São Francisco em um site. Eu tentei:

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

para nenhum proveito. Eu tentei as respostas para esta pergunta , mas @font-facenão é a solução aqui.

A nova fonte do sistema da Apple não é exposta publicamente. A Apple começou a abstrair nomes de fontes do sistema:

A motivação para essa abstração é que o sistema operacional possa fazer melhores escolhas sobre qual face usar em um determinado peso. A Apple também está trabalhando em recursos de fonte, como glifos selecionáveis ​​“6 ″ e“ 9 ″ ou números não monoespaçados. Acho que eles também gostariam de trazer esses recursos para a web.

Safari e Firefox usam SF para -apple-system; O Chrome reconhece BlinkMacSystemFont:

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

Existem também outras variações:

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

Você pode demonstrá-los no seguinte violino; a maioria ainda não é compatível: http://jsfiddle.net/v94gw9nx/

Peguei minhas informações no artigo de Craig Hockenberry, que contém muitas informações excelentes sobre o uso da fonte: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Além disso, algumas informações excelentes no blog Surfin 'Safari sobre o uso de fontes abstratas do sistema: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

E, aparentemente, a Apple está trabalhando com o W3C para padronizar usando um nome de fonte genérico do "sistema" em CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Baixe os arquivos .otf da fonte SF para seu uso pessoal: https://developer.apple.com/fonts/

Nenhuma das respostas atuais, incluindo a aceita , usará a fonte San Francisco da Apple em sistemas que não a tenham instalada como a fonte do sistema. Como a questão não é "como faço para usar a fonte do sistema OS X em uma página da web", a solução correta é usar fontes da 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");
}

Fonte

Testado pela última vez: março de 2018

Para resolver a questão

Como usar a nova fonte San Francisco da Apple em uma página da web

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

ou (ainda mais curto):

font-family: -apple-system, BlinkMacSystemFont;

deve ser suficiente.

No entanto, se você deseja padronizar a fonte do sistema em várias plataformas, sugiro:

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

• -apple-system- San Francisco no Safari (no Mac OS X e iOS); Neue Helvetica e Lucida Grande em versões anteriores do Mac OS X.
• system-ui - fonte padrão da IU em uma determinada plataforma.
• BlinkMacSystemFont- equivalente a -apple-system, para Chrome no Mac OS X.
• "Segoe UI" - Windows (Vista +) e Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) e Chrome OS.
• Ubuntu - todas as versões do Ubuntu.

A ideia foi tirada da seguinte edição do github .

Você pode procurar fontes para outro sistema operacional ou versões mais antigas delas neste artigo sobre truques de CSS .

-apple-system permite que você escolha San Francisco no Safari. BlinkMacSystemFont é a alternativa correspondente para o Chrome.

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

Roboto ou Helvetica Neue podem ser inseridos como substitutos antes mesmo da sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (como ou anteriormente http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / faço um ótimo trabalho explicando os detalhes.

Se o usuário estiver executando o El Capitan ou superior, ele funcionará no Chrome com

font-family: 'BlinkMacSystemFont';

A Apple está abstraindo as fontes do sistema daqui para frente. Esta instalação usa um novo nome de família genérico - sistema-maçã. Portanto, algo como abaixo deve dar o que você deseja.

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

Esta é uma atualização para esta questão bastante antiga. Eu queria usar as novas fontes SF Pro em um site e não encontrei fontes CDN, além das mencionadas acima (applesocial.s3.amazonaws.com).

Claramente, este não é um repositório de conteúdo oficial aprovado pela Apple. Na verdade, eu não encontrei NENHUM repositório de fontes oficial servindo fontes Apple, pronto para ser usado por desenvolvedores web.

E há um motivo - se você ler o contrato de licença que acompanha o download do novo SF Pro e outras fontes em https://developer.apple.com/fonts/ - ele afirma nos primeiros parágrafos de forma muito clara:

[...] você pode usar a fonte da Apple exclusivamente para criar mock-ups de interfaces de usuário para serem usados ​​em produtos de software executados nos sistemas operacionais iOS, macOS ou tvOS da Apple, conforme aplicável. O direito anterior inclui o direito de mostrar a fonte da Apple em capturas de tela, imagens, maquetes ou outras representações, digitais e / ou impressas, de tais produtos de software rodando exclusivamente em iOS, macOS ou tvOS. [...]

E:

Exceto conforme expressamente previsto neste documento, você não pode usar a Fonte Apple para, criar, desenvolver, exibir ou distribuir qualquer documentação, arte, conteúdo de site ou qualquer outro produto de trabalho.

Mais distante:

Exceto quando expressamente permitido [...] (i) apenas um usuário pode usar a Fonte Apple por vez, e (ii) você não pode disponibilizar a Fonte Apple em uma rede onde possa ser executada ou usada por vários computadores ao mesmo tempo.

Sem mais perguntas para mim. A Apple claramente não quer que suas fontes sejam compartilhadas na web fora de seus produtos.

Você não pode usar o Apple System Font servido diretamente de um banco de dados. É contra a licença, mas você pode usar isso para sistemas Mac superiores a High Sierra

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

Ou você pode usar este:

font-family: 'BlinkMacSystemFont';

Testado pela última vez em 2015

Deve usar esta solução como última escolha, quando outras soluções não funcionarem.

Resposta original:

Trabalhe no macOS Chrome / Safari

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