WordPressのシステムフォントスタックへの移行（方法と理由）

私はWebパフォーマンスの大ファンです。 しかし、私はそれがデザインを妥協するべきである、あるいは妥協する必要があるとも思いません。 真ん中には常にバランスが取れています。 2017年に、私はGitHubのブログにいて、彼らのフォントを掘っていました。 とても読みやすかったです。 そこで、Chrome Devtoolsを使用してプロパティを調べたところ、システムフォントスタックを使用していることがわかりました。

私は何年もの間システムフォントを使用していて、それらが大好きです。 今日は、WordPressサイトでシステムフォントスタックを使用する方法を紹介します。

システムフォントスタックとは何ですか？

Webサイト用に選択できるフォントにはさまざまな種類があります。 ほぼ4つの異なるオプションがあります。

• Webセーフフォント：無料で、ブラウザにダウンロード時間は必要ありませんが、通常は古くなっているように見えるため、あまり使用されません。 ArialやTahomaが本当に好きな人はいませんか？ Webセーフフォントの完全なリストを参照してください。
• Webフォント：見た目は美しいですが、ブラウザでダウンロードする必要があります。 無料とプレミアムの両方のオプションを利用できます。 Webサイトの全体的なページの重みに追加されます。 ただし、キャッシュされたCDNから提供できます。 プロバイダーには、Google、Adobe Fonts（TypeKit）などが含まれます。
• Webフォントをローカルでホストする：無料とプレミアムの両方のオプションを利用できます。 それでもダウンロード時間が必要であり、キャッシュされたCDNで単一のHTTP/2接続を利用できます。 現在、すべての主要なブラウザには個別のキャッシュパーティショニングがあるため、ローカルでホストする方が実際にはパフォーマンスが向上します。 Perfmattersを使用してGoogleフォントをローカルでホストできます。
• システムフォント：無料で、OSと一致しているので見栄えがよく、ダウンロード時間も必要ありません。 これらは、Weather.com、GitHub、Bootstrap、Medium、Ghost、Booking.com（システムフォントストーリーを読む）、PubMed、さらにはWordPressダッシュボードで使用されます。 私の個人的な意見では、システムフォントはmacOSとWindowsの方が少し良く見えます。

システムフォントは新しいものではありません。 実際、Mediumは2015年にそれらを使用していました。ネイティブフォントを使用しているため、OSと同じように感じます。 最新のオペレーティングシステムの多くは、フォントを非常に賢く選択しており、すべてが非常に洗練されたルックアンドフィールを備えています。 これは、デフォルトでArialやTimesNewRomanのWebセーフフォントに戻るようなものではありません。 私を信じて; 誰もウェブサイトでTimesNewRomanを見たくありません。

そして何よりも、システムフォントは、ブラウザによるダウンロード時間を必要としないという点で、Webセーフフォントと同じように機能します。 これにより、Webサイトの全体的なページの重みを減らすことができます。 2022年4月の時点で、Webフォントは平均してWebサイトの総重量の約6.07％を占めています。 これはそれほど大きなことではありませんが、特にモバイルでは、少しずつ最適化することで、スピーディーなWebサイトが追加されることを忘れないでください。

システムフォントを使用することに不利な点はありますか？ いいえ！ それがその美しさです。 技術的には何もダウンロードされていないため、「フォントの読み込み中にテキストが表示されたままになるようにする」などのPageSpeedInsightsの警告は表示されません。

システムフォントスタックCSS

Webフォントのfont-familyプロパティを使用すると、通常、プライマリフォントと1つまたは2つのフォールバックフォントがあります。 システムフォントでは、さまざまなオペレーティングシステムをすべて含める必要があるため、かなりの数のフォントをスタックする必要があります。 これが「システムフォントスタック」と呼ばれる理由です。

たとえば、CSSがWebフォントでどのように表示されるかを次に示します。

 font-family： "Open Sans"、 "Helvetica Neue"、sans-serif;

そして、これがシステムフォントスタックがどのように見えるかです。 良いニュースは、それらがすべてロードされているわけではないということです。 フォントが利用可能な場合、OSからロードするフォントの順序にすぎません。

 font-family：-apple-system、system-ui、BlinkMacSystemFont、 "Segoe UI"、Helvetica、Arial、sans-serif、 "Apple Color Emoji"、 "Segoe UI Emoji"、 "Segoe UI Symbol"

WordPressダッシュボードがシステムフォントスタックを使用していることをご存知ですか？ これが彼らが使っているものです。

 font-family：-apple-system、BlinkMacSystemFont、 "Segoe UI"、Roboto、Oxygen-Sans、Ubuntu、Cantarell、 "Helvetica Neue"、sans-serif

CSS-Tricksには、@font-faceを使用してシステムフォントを適用する方法に関する代替方法もあります。

システムフォントスタックのチートシート

ここで、必要なセットアップを選択する必要があります。 これは、各オペレーティングシステムに対応するフォントのリストです。 注：これは時間の経過とともに変化するため、新しいオペレーティングシステムが登場したときにフォントを再検討する必要がある場合があります。 このリストは常に最新の状態に保ちます。

システムフォントスタックを実装する方法

私はここwoorkup.comと他のすべてのWebサイトでシステムフォントスタックを使用しています。 ようやく両方の長所を見つけたような気がします。 そして、これが私がそれをした方法です。

オプション1：GeneratePressWordPressテーマを使用する

これを超簡単にしたいですか？ すべてのWebサイトで使用しているGeneratePressテーマに移動するだけです。 カスタマイザーの「タイポグラフィ」で、「システムスタック」を選択するだけです。 以上です！

Astraのような他のパフォーマンス重視のテーマにも、システムフォントを使用するオプションがあります。

オプション2：CSSでシステムフォントスタックを追加する

別のWordPressテーマを使用している場合は、CSSを少し使用してシステムフォントスタックに簡単に移動できます。

ステップ1

WordPressでは、 font-familyのCSSを変更する必要があります。 WordPressカスタマイザーを使用して、「追加のCSS」の下にコードを追加できます。

ステップ2

次のコードを入力します。 これはテーマごとに異なる場合がありますが、ほとんどの場合、以下がすべてをオーバーライドする必要があります。 新しいバージョンのChromeがサポートしているのでsystem-uiを追加していることを除いて、GithHubと同じシステムフォントスタックを使用しています。 スタックに表示される順序で使用されることを忘れないでください。

 body {font-family：-apple-system、system-ui、BlinkMacSystemFont、 "Segoe UI"、Helvetica、Arial、sans-serif、 "Apple Color Emoji"、 "Segoe UI Emoji"、 "Segoe UI Symbol";}
h1、h2、h3、h4、h5、h6 {font-family：-apple-system、system-ui、BlinkMacSystemFont、 "Segoe UI"、Helvetica、Arial、sans-serif、 "Apple Color Emoji"、 "Segoe UI Emoji "、"SegoeUIシンボル";}

テーマによっては、本文のコンテンツに段落タグを追加する必要がある場合があります。 したがって、これは次のようになります。

 body、p {font-family：-apple-system、system-ui、BlinkMacSystemFont、 "Segoe UI"、Helvetica、Arial、sans-serif、 "Apple Color Emoji"、 "Segoe UI Emoji"、 "Segoe UI Symbol"; }

ステップ3

また、WordPressテーマからロードしたサードパーティのフォント（Google Fontsなど）を無効にすることもできます。 各開発者が異なるフォントを含めるため、これも異なる可能性があります。 しかし、多くのテーマには、GoogleFontsのオンとオフを簡単に切り替える方法があります。

デフォルトのWordPressテーマのいずれかを使用する場合は、無料のDisableGoogleFontsプラグインを簡単に使用できます。 または、PerfmattersプラグインでGoogleフォントを無効にすることもできます。

速度テストの前後

そして、もちろん、私は抵抗できませんでした。 速度テストの前後は次のとおりです。 各テストは5回実行され、平均が取られました。

前のスピードテスト

これは、Googleフォントを読み込んだ前の速度テストです。

後のスピードテスト

これが私のシステムフォントスタックを使用した後の速度テストです。 ご覧のとおり、ページ全体の重みを約60 KB減らし、3つのリクエストを削除しました。 1つはfonts.googleapis.comに、次に2つはフォントの太さの異なるバージョンのRobotoにダウンロードします。 システムフォントスタックは、Googleフォントを使用するよりも約6％高速でした。

私は、4〜5種類のフォントの太さやスタイル、場合によっては2〜3種類のGoogleフォントを使用しているサイトをたくさん知っています。 そのため、私よりもさらに重要な改善が見られる可能性があります。

また、novashare.io WordPressサイトをシステムフォントに移動し、すばらしい結果が得られました。 以下のこの速度テストを確認してください。

フォントスムージング

フォントのスムージングは​​個人的な好みに依存します。 アンチエイリアスを適用すると、フォントが少し薄くなり、明るくなります。 少し太めのフォントが好きなので、このサイトでは使用していません。 少し暖かく感じたと思います。 ただし、両方を試して、どちらが好きかを確認できます。

これを本体に追加できます。

 体 {
-webkit-font-smoothing：アンチエイリアス;
-moz-osx-font-smoothing：グレースケール;
}

概要

システムフォントは、WebフォントやWebセーフフォントの優れた代替手段になる可能性があります。 私はまだ自分のフォントの見た目が本当に好きです、そして今私はそれがユーザーに何の負荷も引き起こしていないことを知っています。 Googleフォントはローカルでホストできますが、それでもページ全体の重みの一部です。

あなたの考えが何であるか興味がありますか？ WordPressでシステムフォントスタックを使用しましたか？ もしそうなら、私に知らせてください。