シュウ

今回は【2021年】 Google Fontsの設定から設置までの流れを解説!!
の解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• Google Fontsについて学びたい方へ
• 今回はGoogle Fonts(文字)について解説しております。

Google Fontsとは、Googleが提供する、無料で利用可能なフリーフォントのサービスです。
フォントの代表的な「ゴシック体」、「明朝体」などがあげられますが、Google Fontsでは、デザイン性あふれるフォントがたくさん存在します。

上記では「手書き風」なフォントになっております。
Google Fontsでは、文字の太さ、文字の種類(イタリック:斜め)などの設定も可能になります。

Google Fontsの使い方

Google Fontsとは、Googleが提供する、無料で利用可能なフリーフォントのサービスです。
まずは下記のサイトから「Google Fonts」にアクセスしましょう。

ユーザー登録などは不要です、無料で利用可能です。
では、次に「メニューバー」の解説です。

メニューバーについて

フォントの選択について

使いたいフォントを選択します。
フォントの詳細画面に移動します、詳細画面では、フォントの太さ(Medium、bold)、フォントの種類(italic)などの選択が可能になります。

詳細画面の右にある、「+ Select this style」を押してください。

コードの選択について

先程の「+ Select this style」を押すと、「Use on the web」が表示されます。

ラジオボタンの「link」を選択します。
下記のコードlink href="https://fonts.googleapisから始まるコードをhead内に追加します。

更に、「CSS rules to specify families」のコードをCSSに追加し完了になります。

<link href="https://fonts.googleapis.com/css2?family=Alegreya&display=swap" rel="stylesheet">

/*--CSS--*/
.font-01 {font-family: 'Alegreya', serif;}

日本語を使用する際の注意点について

Languagesから、言語の選択が可能になります。
日本語を選択したい場合はプルダウンメニューから「Japanese」を選択してください。

例として、「熊 麒麟」といった複雑な漢字(文字)は四角になり、反映しません。
日本語はひらがな・カタカナ・英数・記号、漢字が存在するため、日本語を使用する際には、注意が必要です。

Google Fontsの使う場所について

Google Fontsは、無料で様々なフォントが存在し、デザイン性あふれるフォントがたくさん存在します。
メリットもありますが、デメリットもあります。

デメリットとは、外部のサービスの為、複数のフォントを使用すると、Webサイトの表示速度が遅くなる原因になります。
また、Webサイト全体をGoogle Fontsにするのではく、「見出し」のみにしておきましょう。
本文に使用するのはなるべく避けておきましょう。

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【WordPress】MW WP Form同意するチェックについて解説

  2024.02.08

• 

  【WordPress】MW WP Form住所自動入力について解説

  2024.01.25

• 

  【WordPress】アイキャッチ画像の条件分岐について解説

  2024.01.11

関連記事

< 前の記事

【CSS】outlineの使い方、outline-offset(間隔)を学ぼう!

次の記事 >

【2021年】 Icons Generator 設定から設置までの流れを解説!