【初心者向け】Google Fontsの使い方

Google Fontsとは？

Googleが提供する、Webフォントのことです。
フォントの種類は多岐にわたり、商用利用も無料です。

Webフォントとは？

Webフォントとは、Webページにおいて、ユーザーのシステムにインストールされているフォントではなく、インターネットを通じて提供されるフォントを指します。
表示されるフォントはデバイスに影響されず全て同じように表示されます。

Webフォントのメリット

・デザインの自由度が増す： 任意のフォントをWebページに適用できるため、デザインのバリエーションが大幅に増えます。
・統一されたユーザー体験： 全てのユーザーに対して、デザインが統一された形で表示されるため、ブランドイメージを一貫して保つことができます。
・アクセスの向上： ウェブアクセシビリティの観点からも、読みやすいフォントを選択することで、情報のアクセス性を向上させることができます。

Google Fontsの使い方

Google Fontsにアクセスする

Google Fonts

フォントを選択する

使用したいフォントを選択します。
フォントをクリックすると、そのフォントの詳細ページに移動し、フォントのスタイルや重さを確認できます。

Webフォントの探し方

①検索したいフォント名を入れます。
②サンプルで表示される文章を設定します。
③言語や書体を選択します。

フォントを追加する

フォントのスタイルを確認して【 Get font 】をクリック

追加するフォントを確認して【 Get embed code 】をクリック

HTMLにフォントを組み込む

①追加するフォントの太さ（weight）を選択する
②読み込み用コードをコピー

headタグ内に追記

先程のコードを、タグの中身に追記すると読み込み準備完了です。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

CSSでフォントを指定する

body {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}

あとはCSSでfont-familyに使いたいフォント名を記載するだけです。
また、文字の太さを変えたいときfont-weight:〇〇;で記述します。

まとめ

今回はGoogle Fontsの使い方を解説しました。
Google Fontsは種類も多く、何を使うか迷ってしまいそうですね！
フォントの1つでサイトの雰囲気も変わるので、ぜひGoogle Fontsを利用してみてください。