次のウェブデザインプロジェクトでGoogleFontsを使用する方法

したがって、Googleには、次のプロジェクトで使用する準備ができている何百もの無料のWebフォントがあると聞いたことがあるでしょう。しかし、あなたはあなたのウェブサイトでそれらをどのように使用しますか?この記事では、Webサイトで実行するための手順について説明します。10分もかからないはずです!

Google Fontsとは何ですか?

「GoogleFontsは、ウェブを前進させ、高速化するためのエンジニアリングイニシアチブとして2010年に最初に立ち上げられました。」— Google Design

Google Fontsは2010年に発売され、すぐにインターネットで最大の無料のオープンソースフォントセレクションになりました。すべてのGoogleFontsは、商用および個人使用のために無料です。Google FontsのWebサイトでは、誰でも簡単にさまざまなフォントを選択して、自分のデザインのニーズに合わせて利用できます。

誰がGoogleFontsを使用していますか?

みんなしている!グラフィックデザイナー、UXデザイナー、研究者、開発者、ウェブデザイナー、ブロガー、ソーシャルメディアマネージャー、起業家、アーティスト、学生、教師、写真家、その他多数。看板、ポスター、プレゼンテーションデッキ、結婚式の招待状、ウェブサイト、本で使用されているGoogleFontsを見てきました。

誰がフォントを作成しますか?

Google Fontsは、世界中の書体デザイナー、書体ファウンドリ、デザインコミュニティと協力しています。これらの人々や組織は、GoogleFontsに表示されるフォントを設計します。たとえば、ŁukaszDziedzicは、人気のある書体Latoをデザインした独立した書体デザイナーです。ParaTypeという名前の書体ファウンドリが書体PTSerifを設計しました。

Googleがフォントを気にするのはなぜですか?

ウェブサイト上のすべてのGoogleFonts APIリンクにより、Googleはより多くのデータマイニングを行うことができます。それはひどく聞こえますか?はい。ただし、GoogleFontsの使用を妨げるものではないと思います。

グーグルがフォントを気にするもう一つのより快適な理由は、彼らがオープンソースのウェブフォントを大衆がアクセスできるようにしたいからです。彼らは、ナビゲートして使用しやすい、より速く、より美しいWebを作りたいと考えています。彼らはまた、このようなサービスが大いに必要とされた2010年にGoogle Fontsを開始したので、私たちがインターネット上で抱えていたさらに別の問題を解決しました。#dontbeevil

なぜそれらの使用を検討する必要があるのですか?

あなたは自由に勝つことはできません。私は正しいですか?無料であることに加えて、次のWebデザインプロジェクトでGoogleFontsを使用することを検討する必要があります。理由は…

  • フォントはあなたのウェブサイトに簡単に実装できます
  • 850以上のフォントから選択(およびカウント)できます
  • フォントの全体的な品質は向上し続けています
  • GoogleFontsは印刷用にダウンロードすることもできます

オーケー、オーケー、オーケー!次に、それらの使用方法について説明します。

Google Fontsの使用方法—ステップバイステップ

1)Google FontsWebサイトにアクセスします

Google FontsのWebサイトにアクセスして、853のフォントファミリーから選択して数えることができます。このWebサイトでは、フォントスタイル、言語、人気、および太さで結果をフィルタリングできます。「注目の」ページにアクセスすると、GoogleFontsにも新しいフォントが登場します。

2)好きなフォントを検索する

フォントファミリー名を念頭に置いている場合は、それを検索できます。

3)使用する準備ができたら、「+」をクリックします

各フォントファミリーには、右上隅にプラスボタンがあります。プラスボタンをクリックして、画面の下部に表示される「選択ドロワー」にフォントファミリーを追加します。

4)使用するフォントを複数探している場合は、手順1〜3を繰り返します。

5)「選択ドロワー」をクリックして、選択したすべてのフォントを表示します

「選択ドロワー」には、追加したすべてのフォントが表示されます。それはあなたがあなたのウェブサイトに追加するコードを見つける場所です。フォントをデスクトップにダウンロードするオプションもあります。

6)「選択ドロワー」は、コピーしてWebサイトに貼り付けるコードを取得する場所です。HTMLおよびCSSコード

「選択ドロワー」から、コードをコピーしてHTMLとCSSに貼り付けます。Google Fontsをウェブサイトで機能させるには、フォントファミリーを(HTMLで)Google Fonts APIにリンクし、(CSSで)フォントファミリーを指定する必要があります。

7)必要に応じて、[カスタマイズ]タブをクリックして、さまざまなフォントの太さとスタイルを追加します

これは、Webサイトに追加する前に、フォントファミリにさまざまなフォントの太さとスタイルを追加する最後のチャンスです。追加するフォントが多いほどサイトへの読み込みが遅くなるため、必要になることがわかっているフォントの太さとスタイルのみを追加してください。

8)HTMLコードをコピーして、Webサイトに貼り付けます

了解しました。ほぼ完了です。ここで行う必要があるのは、HTMLおよびCSSコードをコピーしてWebサイトに貼り付けることだけです。まず、HTMLリンクをHTMLドキュメントの先頭にコピーします。

9)CSSルールをコピーして、WebサイトのCSSファイルに貼り付けます

最後に、CSSルールをコピーしてCSSファイルに貼り付ける必要もあります。ウェブサイトに1つのGoogleFontを追加する場合は、CSSフォントファミリールールをbodyタグに追加できます。それ以外の場合は、CSSファイルの正しい要素に追加していることを確認する必要があります。

10)両方のファイル(HTMLとCSS)を保存してから、Webサイトを更新し、新しいフォントを表示します

保存して更新することを忘れないでください!

いこうぜ!これで、最初のGoogleFontがWebサイトに正常に実装されました。おめでとう、あなたはあなたをコーダーします。GoogleFontsは基本的に…と言っても過言ではありません。

もっと読む

  • Yuin Chienによる「GoogleFontsの再考」(Google Design)
  • Hayden Millsによる「より良いフォントペアリングのための6つのヒント」(フォントペア)
  • Google Fontsによる「ChoosingWeb Fonts:ABeginnersGuide」

読んでくれてありがとう

以下にコメントを残すか、Twitterで質問があれば私に連絡してください✌️

また、私はFont Pairの作成者であり、GoogleFontsをペアリングするのに役立ちます。タイポグラフィの投稿をもっと読むには、新しいMediumの出版物をチェックしてください!