変数フォント：すべてを変更し、パフォーマンスに適している唯一のフォント。

多くのフォントのためにWebはゆっくりとロードされますか？ Webが遭遇するために行う古典的な問題

私たちが美しくデザインすることを意図しているウェブサイトを感じたことはありますか？さまざまなフォントを使用して、次元に見えるようにします。それは「俳優」であることが判明し、ウェブサイトは信じられないほど遅くダウンロードされますか？大胆なトピック（太字）、通常のコンテンツ（レギュラー）、いくつかの軽い単語の両方が必要ですが、昔はそれを行います。つまり、ユーザーのブラウザに3つのフォントファイル（.woff、.woff2、ttf）以上をダウンロードするように注文する必要があります。各ファイルには独自のサイズが十分にあるため、多くのスタイルの重みが高くなると、ロードする必要があるファイルの数がさらに増加します。これは、ユーザーがイライラするまで長い間待つことができるパフォーマンスの問題の「出発点」です。そして、私たちが準備した美しさを見る前に、私たちのウェブサイトを閉じるように押すかもしれません

‍

イラストのプロンプト：ウェブサイトのデザインパフォーマンスは、コンピューターの前の寺院に座っています。画面には、赤で上昇している荷重速度グラフがあります。また、ファイルが画面から浮かび上がる多くのフォントファイルアイコンがあります。重量と負荷の負担を表します

なぜ多くのスタイルのフォントを使用して、Webを遅くするのですか？

この問題の主な原因は非常に簡単です。これは、「スタイル」のそれぞれの静的フォントまたは各「重量」の世界で長い間慣れてきた「従来のフォント」アーキテクチャであり、完全に個別のファイルに保存されます。 （700）4つの異なるフォントファイルをダウンロードする必要があります。誰かが私たちのウェブサイトに行くたびに想像してみてください。彼のブラウザは、これらのファイルをダウンロードするために4回リクエストをサーバーに送信する必要があります。より多くのリクエストとより大きなファイルサイズ。ページの読み込み（ページの読み込み時間）のダウンロードに使用される時間は、影として長くなります。、レンダリングブロッキングリソースを引き起こす主な原因の1つです。これは、Google PagesSpeed Insightが好まないものです。そして、それは当社のウェブサイトのパフォーマンスに直接悪影響を及ぼします

‍

イラストのプロンプト：左側の単純なインフォグラフィック比較。4つのボックス（ライト、レギュラー、ミディアム、ボールド）を備えた「静的フォント」が右ブラウザーに送信されます。矢印で、時間がかかることを指摘しています

多くのフォントのためにウェブサイトを遅くします。予想よりも深刻な結果が得られます

重いフォントファイルのためにウェブサイトのゆっくりとダウンロードされるのは、ユーザーがあなたを悩ませるのは小さな問題だけではありません。しかし、それは私たちのビジネス目標のチェーンに影響します。想像してみてください： 1。ユーザーエクスペリエンスが破壊されました：誰も待つのが好きではありません。多くの調査によると、1〜3秒しかロードできないため、30％以上の収益率を上げることができます。 2。SEOランキング：ページ速度（ページ速度）は、Googleが長い間ランク付けされてきた重要な要因の1つです。遅いウェブサイトは低品質と見なされています。検索結果で上位にランク付けするのは困難3。変換率が低下：ユーザーがイライラし、最初にウェブサイトを押し出すとき。あなたが彼を顧客に変える機会。 （購入、フォームに記入する、またはメンバーシップの申請など）、すぐにゼロになります。 4。理由によるリソースの無駄：環境に優しいエネルギーWebの作成に焦点を当てた持続可能なWebデザインの反対に、多くのファイルをダウンロードする必要がありますこの問題を慢性化させると、毎日無料で顧客とビジネスチャンスの両方を失うようです。

‍

イラストのプロンプト： 「スローフォントのロード」から始まるネガティブな効果を示すDaiグラム画像は、「ユーザーエクスペリエンスが悪い」（ランダムな顔）につながり、その後に「高いバウンスレート」（矢印がWebサイトから跳ね返る）、最後に「低SEOランキングとコンバージョン」が続きます。

ソリューションは「可変フォント」にあります。すべてを実行できる唯一のフォントです。

そして、このテクノロジーは私たちに道を与えてくれました。つまり、**変数フォント**または「変更」できるフォントです。その概念はフォントの革命です。すべての重みとすべてのスタイルに個別のファイルを持つ代わりに。変数フォントには、** "One File" **にすべてが含まれます！この天才ファイルは、フォントの主要なコアデータを保持します。設計者または開発者がCSSコードを介して独立して「値を調整」できるようにします。軸（軸）。一般的な調整は次のとおりです。

• 重量（WGHT）：キャラクターの厚さが薄く、薄いものから黒まで。
• 幅（wdth）：幅を調整できます - 文字の狭さ
• Slant（SLNT）：文字のテキストを調整します（イタリックに似ていますが、程度を調整できます）。
• 光学サイズ（OPSZ）：さまざまなサイズのディスプレイに合わせて、文字の詳細を調整します。

変数フォントへの変更は、ブラウザが1つのファイルフォントファイルのみをダウンロードするため、HTTP要求の数が発生し、巨大なファイルサイズが縮小することを意味します。、美しさと最高のパフォーマンスの両方を同時に強調する最新のWebサイトデザイントレンドと一致する変化です

‍

イラストのプロンプト：唯一の「A」文字を示す美しいグラフィックスですが、重量、幅、スラント、光学サイズの4つのスライダーコントロールがあります。

本物からの例：ニュースWebサイトが変動フォントに切り替わるとき

メインの見出し（Black 900）、Bold 700）、カテゴリ500名（中500）、ニュースコンテンツ（レギュラー400）を含む40kbのフォントファイルを含むニュースコンテンツを含む、最初のページで静的フォントを使用していたオンラインニュースWebサイトをより明確にするために、ウェブサイトを遅くすることができます。特に強力なインターネットではない携帯電話では、開発チームは元のファミリフォントの変数フォントに切り替えることにより、新しいWebサイトであるリニューアルを決定しました。ファイルサイズはわずか120kbに減少します！結果は次のとおりです。1。ページの読み込み時間はほぼ2秒間減少しました。最初からユーザーを感動させます。 2。55から92までのパフォーマンスセクションのGoogle PagesSpeed Insights： SEOは明らかに。 3.バウンス率は15％低下しました：ウェブ上のユーザーが長くなりました。詳細と4を読む。デザインチームはより自由です： 650（セミボールド）の重量などのデザインに「適合する」フォントの重みを作成できます。それほど厚くなりたくない部分の場合、太字は中程度よりも顕著であり、静的フォントでは不可能です。

‍

イラストのプロンプト：左側のニュースWebサイトに入る携帯電話画面の前と後の画像の画像を比較してください（前）、ピボット負荷とPageSpeedグラフがあります。正しいスコア（後）コンテンツは完全な結果を表示し、PageSpeedグラフは緑色のスコアが高くなっています。

変数フォントを使用したいですか？何をするか？ （すぐに開始）

変数フォントの始まりは難しくありません。特に、すでにCSSに精通している人のために。これは簡単なステップです。すぐに従うことができること：

1. 適切な変数フォントを見つける：開始の最良のソースはGoogleフォント。 「変数フォントのみを表示」チャネルにチェックするだけです。無料で利用できる多くの良質のフォントがあります。または、信頼できる他のソースからも試してみます
2. CSSでのフォントの発表： @font-faceを使用してフォントを実行します。ただし、各ファイルを発表する代わりに、1つのファイルのみを発表し、サポートする軸範囲を指定します。例： @font-face {
font-family：inter vf ';
src：url（ 'inter-variable.wof2'）形式（ 'woff2-varivests'）;
重量
：nmal;
}
3. シートのスタイルを呼び出す：発表後、 Font-Weight：700などの静的フォントのように同じ重量を実行できます。または、Qualifications font-variation-settings、他のコア固有のコアを制御します。h1 {
font-family： 'inter vf'、sans-serif;
font-weight：800; / *厚さを調整 * /
}
p {
font-family：inter vf '、sans-serif;
font-weight：450;罰金 * /
font -variation： '-5; / *わずかに調整 * /
}
4. フォントのロードの計画：最高のパフォーマンスを得るには、フォントディスプレイの使用など、フォントロード戦略変数フォントのロードを待っている間にバックアップフォントでメッセージ表示を作成するには

開発者の優れたソースであるMDN Web Docsから変数Fontsガイドを読むことをお勧めします

‍

イラストのプロンプト：ステップバイステップ3ステップの不動産：1。拡大アイコンはGoogleフォントのロゴを調べています。 @font-faceおよびfont-variation-settingsを使用したコードコード。 3。

人々が可変フォントについて疑問に思う傾向がある質問。

Q：ブラウザのほとんどは可変フォントをサポートしていますか？
回答：サポート！今日最も人気のあるブラウザ（Chrome、Firefox、Safari、Edge）。デスクトップとモバイルの両方が長年にわたって可変フォントをサポートしており、ほとんどのユーザー（95％以上）が間違いなくあなたのウェブサイトを見ることができることを自信を持って使用することができます。

Q：どのフォントが可変フォントであるかをどのようにして知ることができますか？
回答：観察する最も簡単な方法は、フォントサービスプロバイダーを見ることです。 Googleフォントには、「変数」サインがあります。または、通常のファイルとしてダウンロードされた場合、変数フォントファイルには「変数」、「VF」、または軸の名前があります。ファイル名と通常、ファイルサイズは、すべてのスタイルの情報が含まれているため、単一の静的フォントファイルよりも大きいです

Q：変数フォントは常に静的フォントよりも優れていますか？
回答：ほとんどの「はい」。特に、プロジェクトが可変フォントを使用して2〜3枚以上のスタイルを使用したい場合。 1つのファイルがパフォーマンスを向上させます。しかし、あなたのウェブサイトが非常に簡単で、1つのスタイル（通常など）のみを使用している場合。単一の静的フォントを使用すると、わずかに小さくなる場合があります。ただし、可変フォントの選択により、将来的に設計を調整するための柔軟性が向上します。

Q：可変フォントの使用は、UI/UX設計に影響しますか？
回答：より良い方法での影響！それは、役割ベースのデザイナーにプリント（タイポグラフィ）を拘束する自由と解決を与えます。この最新のテクノロジーを使用して最高のエクスペリエンスを作成するUX/UIデザインサービスが必要な場合、すべてを完璧に調整しやすくしますこれは専門家があなたを助けることができるものです。

‍

イラストのプロンプト：質問（？）のQ＆Aスタイル画像と短い回答のある正しいマーク（✓）。それは、包括的なサポートを伝えるために示すさまざまなブラウザロゴ（Chrome、Firefox、Safari、Edge）があります。

概要：より速く、より良いWebサイトのために、可変フォントにアップグレードする時が来ました。

この時点で、可変フォントはデザイナーにとって単なる新しいおもちゃではなく、ウェブサイトのパフォーマンスの問題を直接解決するのに役立つ「ゲーム変更ツール」であることにすでに同意しています。多くの静的フォントのダウンロードから可変フォントに変更されます。は、読み込み速度、ユーザーエクスペリエンスの向上、SEOランキングの向上、そして最も重要なことに、無制限のデザインにおける独立性の両方の点で莫大なリターンを提供する投資です。これは、すべての関係者に良い影響を与える決定です。 Web所有者、開発者、デザイナー、特に「ユーザー」の両方

タイポグラフィの美しさを、もう失われた速度で交換しなければならないようにしないでください。心を開いて、変数フォントを使用して、今日からプロジェクトに適用してください。そして、「美しい」と「高速」の両方のウェブサイトを作成することが実際に可能であることがわかります。そして、あなたが思っているよりも簡単です！

‍

イラストのプロンプト：空に上昇しているロケットを実行する強力なグラフィックスロケットには「可変フォント」という言葉が付いており、ハート（ユーザーの愛）やSEOランキングなどのさまざまなアイコンを通るルートがあります。

‍