【保存版】CSSでSan Franciscoフォントをウェブページに簡単に適用する方法

2024-06-27

ウェブページでAppleのSan Franciscoフォントを使用する方法（CSS）

システムフォントを使用する

San Franciscoフォントは、Safari、Firefox、Chromeなどの主要なブラウザでシステムフォントとして認識されます。そのため、以下のCSSコードを指定することで、これらのブラウザでSan Franciscoフォントが自動的に適用されます。

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

Appleは、San FranciscoフォントのWebフォント版を「SF Pro」という名前で提供しています。しかし、このフォントは商用利用が制限されており、個人での利用にのみ許可されています。

SF Pro Webフォントを使用するには、以下の手順が必要です。

ダウンロードしたフォントファイルをWebサーバーにアップロードします。
以下のCSSコードを指定し、アップロードしたフォントファイルを参照します。

@font-face {
  font-family: 'SF Pro';
  src: url('https://example.com/fonts/SFPro-Regular.woff2') format('woff2'),
       url('https://example.com/fonts/SFPro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'SF Pro', sans-serif;
}

注意事項

上記の方法は、2024年6月現在のものであり、将来変更される可能性があります。
SF Pro Webフォントは、商用利用が制限されています。商用利用の場合は、ライセンス契約を確認する必要があります。
Webフォントを使用すると、ページの読み込み速度が遅くなる可能性があります。

San Franciscoフォントの詳細については、以下のリソースを参照してください。

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

このコードをHTMLファイルの <head> セクションに追加すると、Safari、Firefox、Chromeなどの主要なブラウザでSan Franciscoフォントが自動的に適用されます。

説明

font-family プロパティは、要素で使用されるフォントファミリを指定します。
-apple-system は、San Franciscoフォントを指定するCSS拡張子です。
sans-serif は、システムフォントが利用できない場合に使用するフォントファミリを指定します。

バリエーション

以下のコードは、Webフォントを使用する 方法を示しています。

@font-face {
  font-family: 'SF Pro';
  src: url('https://example.com/fonts/SFPro-Regular.woff2') format('woff2'),
       url('https://example.com/fonts/SFPro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'SF Pro', sans-serif;
}

このコードは、以下の点に注意する必要があります。

https://example.com/fonts/ は、アップロードしたフォントファイルのURLに置き換える必要があります。
SF Pro は、フォントファミリの名前を置き換える必要があります。

このコードを追加すると、ページの読み込み速度が遅くなる可能性があることに注意してください。

上記はあくまでもサンプルコードであり、状況に合わせて変更する必要があります。

San Franciscoフォントをウェブページに適用するその他の方法

Font AwesomeなどのWebフォントサービスは、San Franciscoフォントを含む様々なアイコンやフォントを提供しています。これらのサービスを利用すれば、簡単にSan Franciscoフォントをウェブページに適用することができます。

CSSフォールバックを使用すれば、ブラウザがSan Franciscoフォントをサポートしていない場合に別のフォントを指定することができます。

body {
  font-family: 'SF Pro', Helvetica, Arial, sans-serif;
}

このコードの場合、ブラウザがSan FranciscoフォントをサポートしていればSan Franciscoフォントが適用され、サポートしていない場合はHelvetica、Arial、sans-serifフォントの順に適用されます。

@font-feature-settings プロパティを使用すれば、San Franciscoフォントの特定の機能を有効にすることができます。

詳細は以下のリソースを参照してください。

最適な方法の選択

San Franciscoフォントをウェブページに適用する最適な方法は、状況によって異なります。

シンプルで簡単な方法であれば、システムフォントを使用する または Webフォントサービスを利用する のがおすすめです。
より多くの制御が必要であれば、JavaScriptライブラリを使用する または @font-feature-settings を使用する を検討することができます。

どの方法を選択する場合も、フォントライセンスの制限事項に注意する必要があります。

css