この記事ではAFFINGER5に入っている3種類のフォント以外のフォントを使いたい方向けに、どうやったらいいか解説した記事です。
この記事を読めば
- AFFINGER5でのフォントの変更方法
- 記事本文のフォントの変更方法
がわかります。
今回使うのは「Google Fonts」です。
Google Fontsの中から自分が使いたいと思ったフォントを「TAKUBLOG」に反映させます。
Google Fontsで日本語対応で自分が使いたいフォントを選んでカスタマイズする
Google Fontsから自分が使いたいフォントを選びます。
とはいえ、無数のあるフォントの中から探すのではなく、きちんと日本語に対応しているフォントを選択しましょう。
探し方は簡単です。
右のサイドバーで日本語対応のフォントに絞り込む
Google Fontsの右側にあるサイドバーで「Languages」のところがあります。そこを「All Languages」→「Japanese」に変更します。
これで日本語に対応しているフォントだけ表示されます。
自分の使いたいフォントが選択する
今回は例として「Montserrat」というフォントを選択しました。
使いたいフォントを見つけたらプラスを押します。すると画面下に黒いバーが出てきます。ここで細かい設定をします。
使いたいフォントの細かい設定をする
黒いバーをクリックすると詳細を設定できるようになります。ここで「CUSTOMIZE」を選択。するとフォントの太さと対応させたい言語を選択できます。
私はフォントの太さを「regular 400」と「bold 700」を選択し、言語は「Latin」を選択しました。
「bold 700」は記事一覧の文字や記事の見出し用に選択しています。もう少し細くしたいなら「semi-bold 600」でも良いと思います。
CUSTOMIZEからEMBEDに戻しコードをメモする
CUSTOMIZEからEMBEDに戻すとコードが表示されています。
私が設定したフォントのコードは
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
font-family: 'Montserrat', sans-serif;
です。
わかりやすく太字にしたところが必要になるコードです。コードをコピーしてメモかテキストエディタなどに貼り付けておいてください。
これで準備は完了です。
あとは先ほどのコードをAFFINGER5の管理画面で入力するだけです。
コードをAFFINGER5に入力して反映箇所を選択
先ほどのコードをAFFINGER5のブログに反映させます。
反映方法は「AFFINGER5 管理」→「A フォントの種類」→「Google Fonts」です。
ここにメモしておいたコードを貼り付けます。
下のコード「font-family: 'Montserrat', sans-serif;」はこのまま反映させるとタイトルや見出しには反映されません。
記事タイトルや見出しにも反映させたい場合はコードの最後に「!important」を追加してください。
追加するとこうなります。「font-family: 'Montserrat', sans-serif!important;」
セミコロン「;」の位置に注意してください。
最後に
- サイト名・コメント・NEW ENTRY・関連記事
- 記事タイトル・見出しタグ・ウィジェットタイトル 他
- 記事一覧タイトル
- 各メニュー（第一階層以下）
- 各メニュー（第二階層以下）
- ブログカード・おすすめ記事タイトル
- SNSボタン
- 電話番号・任意記事のナンバー・Views（EX）
上記の反映させたい箇所にチェックを入れて保存すれば完了です。
記事本文にもフォントを反映させる
今まで説明した方法は「記事タイトル」や「見出し」のフォントを変更する方法です。
これだけでは記事本文はフォントが変わっていません。
記事本文もフォントを変更する方法は
「カスタマイズ」→ 「追加CSS」で次のコードを追加します。
* {
font-family: 'Montserrat', sans-serif;
}
今回は「Montserrat」の場合で説明しました。
フォントを変更する際の注意点
フォントはサイトの見栄えを大きく変えてしまいます。自分が気に入ったからといって手書きフォントみたいなフォントをブログに反映すると、読みづらくなってしまい読者が離れていってしまう可能性があります。
フォントを帰る際はなるべくシンプルなフォントを選び、読者が読みづらくなさそうなフォントにしましょう。