Google Fonts + 日本語を早速つかってみる

Google Fonts + 日本語を使ってみます。
アーリーアクセスなので、保証はないですよー。
https://googlefonts.github.io/japanese/
※201707時点で、9書体ですね。

例えば、さわらび明朝
https://googlefonts.github.io/japanese/#sawarabimincho

味があって、いいフォントですねー!
‘う’とか’や’のはらいとか良いですねー!

さて、早速、このサイトのタイトル部分に設定してみましょう。

◯フォントデータを読み込むリンクタグを設定します

Googleのサイトから<link…となっているタグをコピーします。

コピーしてきたリンクタグをWPのテーマに設定します。
メニューのテーマ編集から

テーマヘッダーを選択します。

<link…となっているタグがいくつか既に存在しているので、その下にコピーしてきたリンクタグを入力し、更新します。

これでフォントデータの読み込みは完了です。

◯スタイルシートにフォント情報を設定する

続いて、読み込んだフォントを使うために、スタイルシートでフォント情報を設定します。
まずは、Googleのサイトから設定情報をコピーします。

が、このままだとうまく反映されません。
指定しているフォント名称を変更します。
・変更前
.wf-sawarabimincho { font-family: “Sawarabi Mincho”; }
・変更後
.wf-sawarabimincho { font-family: Sawarabi Mincho,serif; }

WP側は同じくテーマの編集からスタイルシートを選択します。

一番下に変更後の設定コードを入力します。

これで、フォント情報の設定は完了です。
あとは、フォントを適用したいところに設定するだけです。
あと少し!

◯適用したいところにフォントを設定する

先ほど、設定したフォント情報には、目印があります。
.wf-sawarabimincho { font-family: Sawarabi Mincho,serif; }

wf-sawarabimincho
です。
これを設定したい部分に入力します。
今回はタイトル部分。

またまた同じくテーマの編集でテーマヘッダーを選択します。
その中で、site-titleとなっている部分があります。
その内側の class=”wf-sawarabimincho”
を追記します。

<h1 class=”site-title”><a class=”wf-sawarabimincho” href=”http://morinohito.site/” title=”森の人ブログ” rel=”home”>森の人ブログ</a></h1>

こんな感じですね。

好きなところに、目印となるwf-sawarabiminchoを入力すれば、どこにでもフォントを適用することができます。
設定する場所は、classの部分です。
既にある場合は、半角スペースを開けてから、
class=”site-title wf-sawarabimincho”
こんな感じで追記でOK。

と、まぁ、こんな感じです。
日本語フォントではなく欧文フォントでもやることは同じですー。
https://fonts.google.com/

お疲れ様でした。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

デザインの腕が上がる凄いフリーフォント1500 [ ラトルズ ]
価格:2678円(税込、送料無料) (2017/8/5時点)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です