注目キーワード

Google Fontsの使い方を覚えてウェブサイトに読み込む

Google Fontsの使い方を覚えてウェブサイトに読み込む
  1. HOME
  2. Google
  3. Google Fontsの使い方を覚えてウェブサイトに読み込む

Google Fontsの選び方や読み込むコードの取得、WebサイトへのGoogle Fontsの読み込み方などを一連の流れにした使い方で覚えておこうと思います。

ウェブサイトはHTMLサイトとWordPressにGoogle Fontsを読み込み、CSSで表示するのを使い方のゴールとして説明します。

 

目次

Google Fontsの使い方を覚える

 

Google Fontsの使い方は2つの流れで覚えます。

 

  • Google Fontsのページ内で操作する使い方
  • Google Fontsをウェブサイトへ読み込むコードの使い方

 

Google Fontsのページ内で操作する使い方は準備編です。

使用するWebフォントを選んでWebサイトにGoogle Fontsを読み込むためのコードを取得するという実に簡単な使い方です。

 

そしてGoogle Fontsをウェブサイトへ読み込むコードの使い方は実装編です。

Google Fontsのページ内から選んだWebフォントのコードをサイトのheadで読み込みCSSでフォントを表示します。

WordPressの場合はWebフォントのコードを読み込むときにheadに記述ではなくfunctions.phpでGoogle Fontsを読み込ませます。

準備編と実装編の使い方を一連の流れにして具体的に覚えていこうと思います。

 

Advertisement

 

まずは準備編からです。

Google Fontsのトップページを以下のリンクから開くことでGoogle Fontsの使い方を覚えることがスタートします。

 

Google Fontsトップページ

 

そんなの知ってるよな気持ちでGoogle Fontsを開くと以下の画像の画面になります。

 

 

使用するGoogle Fontsの絞り込み

 

Google Fontsのトップページを開いた画面ではWebサイトに使用するWebフォントを絞り込みをして選ぶことができます。

絞り込むにはGoogle Fontsのトップページの画面上部に表示されているフィルター項目を使用します。

 

 

まずはGoogle Fontsで使用したい言語を絞り込みます。

 

 

languageボタンを開くと28言語くらいの種類から言語選択できます。日本語のWebフォントを使用するなら「Japanese」、欧文フォントを使用するならそれぞれ使用したい言語を選択して絞り込みます。

 

 

次にGoogle Fontsの画面上部のcustomボタン横の入力欄にサンプルにする文章を何か入力します。

おそらく最初は「Almost before we knew it, we had left the ground.」と表示されているので、このサンプル文章を削除してWebサイトで使用する文章でもいいので入力します。

 

  • 言語設定で「Japanese」を選んだ場合は日本語で入力
  • 言語設定で欧文系言語を選んだ場合はアルファベット入力

 

言語を欧文にして日本語を入力すると以下の画像のように日本語は表示しないというちょいミスをするので覚えておきたい使い方の１つです。

 

 

ウェブサイトで使用するフォントサイズが決まってるようなら、画面上部の右側にあるフィントサイズを設定しておき、実際にWebサイトに表示したときのフォントサイズに合わせて探し始めるという使い方もできます。

 

Google Fontsの種類からWebフォントを選択

 

使用するGoogle Fontsの絞り込みなどができたらWebサイトで使用したいGoogle Fontsを探し選択します。

 

 

Google Fontsの種類の中からWebフォントを選択する使い方としては上からスクロールして探していくようなので、いいなと思ったフォントはクリックして詳細なWebフォントの画面を開き「Select this style」をクリックして追加していきます。

例えばGoogle Fontsの種類から「Slackey」という欧文フォントを選択する場合、Webフォント名が分かっていれば検索にかけて詳細画面に切り替えます。

 

 

そしてGlyphsでそのフォントの単語を確認したりLicenseで印刷物、デジタル、商用、その他の製品やプロジェクトで自由に使用可能かなどを確認しておきます。

確認後にSelect this styleをクリックします。

 

 

すると画面右側のSelected familyパネルに選択したGoogle Fonts が追加できます。

 

Advertisement

 

もし他にも追加したいGoogle Fontsがある場合は、画面左上のGoogle Fontsをクリックしてトップページに戻ります。

例えば日本語フォントを追加するなら言語を日本語(Japanese)で絞り込み日本語フォントだけを表示させます。

そして「Noto Sans JP」などの日本語フォントをクリックして詳細画面に切り替え。

 

 

選ぶGoogle Fontsフォントによってはフォントの太さ(bold)を選択できるのでboldサンプル横のSelect this styleをクリックして画面右側のSelected familyパネルに追加します。

複数のGoogle Fontsを追加した場合には右側のパネルSelected familyは「Selected families」に変わります。

Selected familiesの場合は取得するWebフォントのコードにも追加したフォントの種類全てを含めたHTMLコードで生成されます。

 

Google Fontsのコードを取得

 

Google FontsのWebフォントを選択してSelected familieに追加することができたらウェブサイトに読み込むコードを取得します。

Google Fontsの画面右Selected familiesパネルで「Embed」にクリックで切り替えます。

 

 

すると使用するGoogle Fontsスタイルを<head>に埋め込むためのHTMLコードとfont-familyを指定するためのCSSコードが取得できるようになっています。

Google FontsをSelected familiesにどんどん追加していく使い方の時点でコード生成されていくのでウェブサイトに読み込む取得コードが問題ないか確認しにいく。みたいな感じです。

コードをコピペしてウェブサイトにGoogle Fontsを読み込むので画面をこのままにしておきます。

 

Google Fontsをウェブサイトに読み込む

 

Google Fontsの使い方の次なるステップ「Google Fontsをウェブサイトへ読み込むコードの使い方」です。実装編ですね。

HTMLサイトとWordPressサイトで読み込む使い方を説明するので、それぞれのサイトに合わせて使い方を覚えてみてください。

念のためウェブサイトに読み込むコードの説明を先にしておきます。

 

 

link hrefから始まるHTMLコードがGoogle FontsをWebサイトで表示するために選択したフォントスタイルが追加されてるスタイルシート

font-familyから始まるコードは選択したGoogle Fontsのファミリー名と一般フォント名がCSSのfont-familyプロパティの値としてコード生成されているのでコピペするだけの優しさコードになっています。

 

Google FontsをHTMLサイトに読み込む

 

Google Fontsで選んだウェブフォントをHTMLサイトに読み込むときには、Selected familyのembedで<linkl>タグをGoogle Fontsを使用するHTMLサイトの<head></head>内にコピペしファイルを保存することで読み込むことができます。

 

 

そしてHTMLサイト内でGoogle Fontsのウェブフォントを表示させるためにstyle.cssを開き、Google Fontsの画面右のSelected familyパネルでfont-familyから始まるCSSコードをコピペします。

例えばSlackeyというGoogle FontsをHTMLサイトのタイトルのフォントとして表示する場合

 

header a{
    font-family: 'Slackey', cursive;
}

 

ウェブサイトのheader要素でサイトタイトルをマークアップしてる要素のCSSセレクタにGoogle Fontsのfont-familyから始まるCSSコードをコピペし保存することでGoogle Fontsを表示できます。

 

WordPressにGoogle Fontsを読み込む

 

Google FontsをWordPressサイトに読み込む場合は、テーマの子テーマのfunctions.phpでGoogle Fontsのスタイルを読み込みます。

子テーマならテーマのバージョンアップが合っても上書きでGoogle Fontsのコードが消えることがないので安全に読み込むことができる場所です。

 

function google_font_scripts() {
    wp_enqueue_style( 'google-web-style', '//fonts.googleapis.com/css2?family=Slackey&display=swap' );
}

add_action( 'wp_enqueue_scripts', 'google_font_scripts' );

 

上の記述はWordPressの関数wp_enqueue_styleでGoogle Fontsで選んだウェブフォント(Slackey)のスタイルをテーマに読み込んでいます。

Google Fonts内で取得できるlinkから始まるコードで<link href=”https:を省き記述します。rel属性のrel=”stylesheet”を省いても読み込めます。

そしてadd_actionのアクションフックではGoogle Fontsのスタイルを読み込む関数をwp_enqueue_scriptsに登録しテーマに表示するウェブフォントの読み込みを適切な方法で読み込ませています。

できれば上記の読み込み方で覚えることをおすすめしますが、難しい場合はGoogle Fontsで取得したフォントのlinkコードをテーマのhead内にコピペする使い方でも読み込むことができます。

 

Advertisement

 

WordPressにGoogle Fontsのスタイルを読み込んだら、WordPressサイトに実際にGoogle Fontsを表示させます。

 

.siteTitle__main {
    font-family: 'Slackey', cursive;
}

 

上記のCSS記述例はWordPressでヘッダーのサイトタイトルにGoogle FontsのSlackeyを指定したサンプルです。

テーマのstyle.cssを開きGoogle Fontsを適用したい要素のCSSセレクタにGoogle Fontsで取得したfont-familyから始まるCSSコードをコピペし保存するという使い方です。

 

Google Fontsが表示できたか確認

 

HTMLサイトでもWordPressサイトでもGoogle Fontsの読み込みが終わったら使用するGoogle Fontsが表示できたか確認し必要なら微調整します。

 

私がGoogle Fontsを表示できたか確認したときのこと

HTMLサイトでのGoogle Fontsの表示はウェブサイトのサイトタイトルに使用しましたがサイトタイトルとしてはフォントサイズが小さい。

そのため最終確認段階でCSSのfont-sizeでフォントサイズの変更をしました。

 

 

WordPressサイトでもサイトタイトルとしてGoogle Fontsを表示させましたが、表示確認すると高さがずれたのでCSSの余白指定で微調整して完成させました。

 

 

どのウェブサイトでGoogle Fontsを表示できたか確認しても細かい微調整は必要になると思います。

Google Fontsを表示できたか確認すると共にレイアウト調整もしてみてください。

Google Fontsの使い方で覚えておくことはこれにて終了です。

 

まとめ

 

Google FontsはWebサーバーからの読み込みなのでユーザー環境のフォントではなくサイト側のウェブフォントで統一表示ができることがメリットです。

そして読みやすいウェブフォントの種類が豊富な中からサイトに合ったフォントを探すのに役立つのもGoogle Fonts

しかし使用するフォントの数やフォントウェイトの種類が多くなればページの読み込みに時間がかかることになります。

特に日本語フォントは重くなりやすいようです。

そのためGoogle Fontsだけに限りませんがウェブサイトに使用する日本語フォントはサイト速度との関係も考慮した使い方にも気をつけるのを覚えておきたいです。

Googleカテゴリの最新記事