Googleフォントの導入と使い方/Noto Sans Japaneseをページタイトルと見出しに実装

こんにちは、トッド(Todd)です。

Google Fontsには個性的なフォントが揃っていて、サイトデザインの印象を変化させることが出来るので取り入れることにしました。

font-familyで選択出来るようにするのが今回の内容になります。

内容の流れは、お使いのブログテーマのHTMLにある<head>~</head>間に使用したいGoogleフォントのHTMLリンクを読み込ませることでfont-family指定が可能になります。

僕が使用しているWordpressテーマ「LION MEDIA」の場合は「外観」→「カスタマイズ」から設定することが出来る箇所が明記されているので分かりやすいですし、コードを使ったファイル編集に抵抗を持たれる方にはオススメのテーマです。

[adchord]

Google Fontsには2パターンあって英語版と日本語版とがあります。↓

参考 GoogleFontsGoogleFonts

 

参考 Google Fonts+日本語GoogleFonts

 

このどちらも実装するまでの流れは同じで、最後にはHTMLリンクを<header>~</header>間にコピペすることでfont-familyを使って表示することが出来るようになります。

Google Fonts(英)導入までの流れ

一癖あるのは英文字タイプのGoogle Fontsで、実装したいフォント名を選択しそれぞれに含まれているスタイルの中から好みにカスタマイズすることが出来るので、それを図解で説明していきたいと思います。

Google Fontsのページサイトに訪れると1番初めにこのような画面になります。

2018年7月現在878種類のWEBフォントが存在しています。全てを見比べるのは時間がかかりますが親切なことに検索機能が充実している形式で紹介されています。

今回は例として、「Quicksand」というWEBフォントで導入から使い方までについて話して行きたいと思います。

カーソルを動かすとスタイルが複数あるフォントに対してはフォントサイズウェイトを変更することが出来るプレビュー画面がその場で表示されるようになっているのでやってみてください。

各、WEbフォントの右上の方にある+アイコンをクリックすると、画面下の方に以下のような↓バーが出現するのでクリックをします。

すると、以下のような画面が表示されます↓

そしたら、「カスタマイズ」と書かれたところをクリックして使用するフォントのスタイルを決めていきます。

この「Quicksand」には4つのスタイルがあるので上記の画像にはそれぞれ(light300)(regular400)(medium500)(bold700)といった種類の選択が求められています。

使用したいフォントのスタイルにはチェックマークを入れておきましょう。

しかしながら、全てのスタイルにチェックマークを入れた場合にLoad TimeがFastからModerateへと変化しました。これは、フォントの読み込みにかかる時間が増えますよ!というサインです。

自サイトのページ速度を遅延させる要因にも、なりかねるので注意しておく良いでしょう。

好みのフォントスタイルの選定が終わりましたら、初めに表示されたEMBEDの画面に戻ります。

さいごに、

①HTMLリンクを自分が使っているテーマのHTML(<head>~</head>)に貼り付ければ使用するための準備は完了になります。

実際に使用する場合は、

②に書かれているCSSを使用したい要素(例えば、h1など)に加えて記述すると反映されます。

日本語Google FontsのNoto Sans Japanese導入までの流れ

日本語タイプのほうも導入する手順は英語版と同じでサイトに行ってもらうと、「このフォントのHTMLリンクはこちらになります。」というような書き方で表示されているので、それを<head>~</head>に貼り付ける事で使用することが出来ます。

適応したいところ「記事タイトル・見出しh2・・・etc」にフォントファミリー指定をしてあげると反映される形となります。

見出しh2にNoto Sans Japaneseを使用したい時は以下のようにしてあげると読み込まれます。↓(テーマによる)

CSS
h2{
 font-family: 'Noto Sans Japanese',   sans-serif;
 font-weight: 900;
}

h2{ font-family: ‘Noto Sans Japanese’, sans-serif; font-weight: 900; }

font-weightの数字を100単位で変更すると文字の太さが変化するので好みの設定をしてみてください。

あとがき

Google FontsのようなWEBフォントを使用すると、ページの表示速度に影響を及ぼす言われているけど部分的に使用する分には大した差は無いという個人的感想。

コメントを残す

メールアドレスが公開されることはありません。