以前『STINGER8でブログタイトルをGoogleフォントにしてみる』という記事で、サイトタイトルを好きなグーグルフォントで表示する方法を解説しました。
しかしこの方法はSTINGER8では出来ても、AFFINGER4では出来ないようになっています。
AFFINGER4管理で標準で選択出来るいくつかのグーグルフォントはサイトタイトルに反映できますが、「自分で好きなグーグルフォントを新たに追加する」ことが通常の方法では出来なくなっているようです。
そこで今回はサイトタイトルにAFFINGER4で「好きなグーグルフォントを追加する方法」を解説します。
AFFINGER4に新しいグーグルフォントを追加する方法
やり方は簡単です。
下記のコードをAFFINGER4の子テーマの「スタイルシート (style.css)」にコピペします。
(このコードは親コード内にありますが、子テーマで記述した方が何かと良いでしょう。)
/* Googleフォントの反映箇所
--------------------------------*/
/*.kdate,.kdate time, 更新日・投稿日*/
#st-mobile-logo a, /*モバイルタイトル*/
.sitename a, /*サイトタイトル*/
.descr, /*サイトタイトル下のキャプション*/
.news-ca, /*お知らせタイトル*/
.tagcloud a, /*タグクラウド*/
h5#resp,h3#reply-title,.form-submit, /*コメント欄見出し*/
footer .footerlogo /*フッターのタイトル*/
{
font-family: Josefin Sans,Julius Sans One,'Meddon',Lobster,Pacifico,Fredericka the Great,Bilbo Swash Caps,PT Sans Caption,Montserrat,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif!important;
}
上記の「font-family」の部分に追加したいグーグルフォントの名前を追加します。前の方が良いでしょう。
試しに「Gloria Hallelujah」を追加してみます。
{
font-family: Gloria Hallelujah,Josefin Sans,Julius Sans One,'Meddon',Lobster,Pacifico,Fredericka the Great,Bilbo Swash Caps,PT Sans Caption,Montserrat,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif!important;
}
これでOKです。
あとは、こちら➡︎『STINGER8でブログタイトルをGoogleフォントにしてみる』で解説している通りにサイトタイトルにグーグルフォントを反映させる方法を行なえば完了です。
簡単でしたね。今回は以上です。