GoogleFontsの使い方

私は使用の大きな支持者ですシステムフォント、これは高速で軽量でうまく機能しますが、少し凝ったものにする必要がある場合もあります。

デザインの見栄えを良くする特定のフォントが必要です。

たぶん、Slabo、Lato、Ralewayのような素敵なフォントです。

Googleは、数多くのサービスの一部として、Google Fontsと呼ばれるツールを提供しています。このツールは（私がこれを書いている時点で）992のフォントファミリーをサポートしています。

インターフェースは少し圧倒的で、フォントの専門家ではないので、どのフォントを選ぶべきかについて私は間違いなく混乱しています。

私は通常、Googleで「最高のGoogleフォント」を検索し、入手した記事を見て、フォントがどのように見えるかを理解します。 Google Fontsで数十のフォントを見るのは、そのためには理想的ではありません。一部のサイトでは、次のような色を簡単に使用できます。この投稿で：

私のウェブサイトの1つで使用したフォントの1つを取り上げましょう。Start2Pを押します。

レトロなウェブサイトに最適なフォントです。私はそれを自分の中で使用しましたWebプラットフォームコースコンピューターっぽい見た目にしたかったホームページ。

フォントページで、各文字がどのようにレンダリングされるかを確認できます。

下にスクロールすると、デザイナーが誰であるか、そして重要な部分であるライセンスが表示されます。この場合、ページには

印刷物、デジタル、コマーシャルなど、製品やプロジェクトで自由に使用できます。ただし、フォントを単独で販売することはできません。

これにより、多くの権限が付与されます。

商用プロジェクトでもフォントを好きなように使用できますが、再販することはできません。

下部には、どのフォントがこのフォントとよくペアになるかをリストした興味深いセクションがあります。

フォントについては、自分が何をしているのかわからず、他の人が何をしているのかを見て、最も合理的な選択をコピーするのが良い戦略であるため、できるだけ保守的にするようにしています。

これで、ページの右上にある[ファミリのダウンロード]リンクを押して、フォントTTFファイルをダウンロードできます。このファイルをコンピュータにインストールして、デスクトッププログラムのフォントとして使用できます。

ただし、Webサイトでフォントを使用するためにそうする必要はありません。

できることは、[スタイル]セクションで、必要な各スタイルの横にある[このスタイルを選択]をクリックすることです。

これにより、選択したファミリのサイドバーに追加されます。

完了したら、[埋め込み]タブをクリックすると、プロジェクトに入力する必要のあるコードが見つかります。linkHTMLにフォントを含める要素、およびフォントファミリを特定の要素に適用するCSSルール：

したがって、この場合、実行する必要があるのは、次のHTMLを追加することです。

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

そしてこのCSS：

body { /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

フォントを読み込めない場合や、読み込みに時間がかかりすぎる場合に備えて、代替フォントを用意しています。

フォントを含める別の方法は、@importCSSのディレクティブなので、を使用する必要はありませんlinkHTMLの属性-すべてCSSファイルにあります：

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

ただし、このアプローチには1つの制限があります。それは、速度が遅いことです。フォントがHTMLでリンクされている場合、ブラウザはHTMLを読み取るとすぐにフォントURLを要求します。

フォントがCSSでリンクされている場合、ブラウザーは最初にCSSのロードを要求する必要があり、次にフォントURLのロードを要求できます。

また、ここで数ミリ秒が失われると、適切なフォントで即座に読み込まれるページと、最初に代替フォントで読み込まれ、使用可能なときに正しいフォントが読み込まれるページとの間に違いが生じる可能性があります。

その他のブラウザチュートリアル：