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 [ ラトルズ ]
|