この記事では、フォントが Web サイトのスピードに与える影響について説明します。また、シームレスなユーザー体験実現のため、Web フォントを最適化することの重要性についても述べます。Monotype Fonts の Web プロジェクトやデジタル広告の効果的活用のためのベストプラクティス、ガイドライン、ヒントをご紹介します。
注記：Web プロジェクトとデジタル広告についての詳細はこちらをご覧ください。
Web サイトやデジタル広告は、美しさ、パフォーマンス、そしてユーザー体験のバランスが重要です。Web サイトは、見た目が魅力的であることに加え、あらゆるプラットフォームやデバイスでの優れたパフォーマンス、シームレスなユーザー体験を実現する必要があります。
Web サイトのパフォーマンスに対するフォントの影響
フォントの選択（フォントの数やフォントファイルのサイズなど）が Web サイトの速度に影響を与える場合があります。Web ページを開くと、ブラウザーはページを正しく表示するために必要なすべてのリソース（画像、動画、フォントなど）のダウンロードを行います。ブラウザーが大きなフォントファイルをダウンロードするには、時間がかかります。
これはユーザー体験に悪影響を与えます。読み込み時間が短縮されることで、SEO ランキングや、Web サイトの見やすさの向上につながります。
Monotype Fonts の[MY Library（マイライブラリ）]セクションにある[Web Project（Web プロジェクト）]と[Digital Ads（デジタル広告）」で、Web フォントの整理や最適化を行うことができます。
プロジェクトで使用するフォントの整理、最適化を行い、ユーザーにとってより効率的で使いやすい体験を実現するために、以下の標準ガイドラインに従ってください。
プロジェクトのフォントバジェットを設定：プロジェクトのパフォーマンス維持のため、フォントリソース（フォントの数、フォントバリアント、キャラクターセットなど）のバジェットを定義しましょう。必要に応じて、Web プロジェクトとデジタル広告内で、フォントを追加/削除できます。
最適化されたフォントフォーマットを使用：Web 上で、Web Open Font Format（WOFF）や Web Open Font Format 2.0（WOFF2）などの最適化されたフォントフォーマットを使用すると、圧縮率とパフォーマンスを向上させるうえで効果的です。フォントファイルのサイズが縮小されて、読み込み速度が向上するため、読み込み時間の問題が軽減されます。Monotype Fonts の Web フォントはすべて、WOFF および WOFF2 フォーマットで作成されています。
フォントをサブセット化してファイルサイズを縮小：フォントをサブセット化することで、プロジェクトに必要なキャラクターとグリフのみを含め、残りは削除することになります。これによって、フォントファイルのサイズが小さくなり、Web フォントのパフォーマンスが向上します。Monotype Fonts の使用により、Web フォントを効率的にサブセット化でき、最適なパフォーマンス実現が可能となります。Web フォントのサブセット化については、こちらの記事をご参照ください。
フォントファイルの数を最少化：Web サイトで使用するフォントファイルの数を減らすことで、ブラウザーがダウンロードするデータ量を削減することができ、Web サイトの速度向上が可能となります。Web サイトのパフォーマンスを向上させるには、使用するフォントファミリー、ウェイト、スタイルを必要最小限にする必要があります。また、可変フォントを使用して、1 つのファイルに複数のスタイルを含めることも検討するとよいでしょう。
注記：当社は、このガイドラインに基づき、プロジェクトのパフォーマンスが低下しないように、Web プロジェクトまたはデジタル広告に、同じフォントファミリーのフォントスタイルを最大 4 つまで追加できるようにしています。ただし、5 つ以上のスタイルを追加したい場合、同じ Web プロジェクトまたはデジタル広告にさらにフォントを追加することができます。
フォントの使用状況を確認：使用しているフォントを定期的にチェックし、どのフォントが読み込まれているか、それらが Web サイトのパフォーマンスにどのような影響を与えているかを確認しましょう。そうすることで、プロジェクトに不要な負荷をかけているフォントを Web プロジェクトやデジタル広告フォルダーから削除することができます。
フォントリクエストの早めの実行：重要なアセットをブロックすることなく、フォントが可能な限り早く読み込まれるよう、フォントリソースをオーダーしましょう。「add to（追加）」オプションや「favorite（お気に入り）」オプションを使用し、必要なフォントを Web プロジェクトやデジタル広告フォルダーに追加してください。