Bloggerで日本語のGoogle Fontsを使うための設定方法
Blogger で Google Fonts(日本語 Web フォント)を設定する方法です。
Web フォントとは
異なるプラットフォームやブラウザで同じ表示を実現できます。Web フォントには様々ありますが、代表的な物に Google Fonts があります。 様々なフォントを無料で Web サイトに適用することができるもので、今回はそれを Blogger に適用してみました。
Google Fonts を Blogger に設定
まず、Google Fontsのサイトで使いたいフォントを選択します。よく使われているフォントは Noto Sans Japan でしょうか。いくつか文字の太さがありますが、一般的な Regular 400 を選択してみます。
Use on the web という部分にコードが表示されるので、これをコピーします。
なお、後で使うので「CSS rules to specify families」にあるコードをコピーしておきます。
Bloggerの[テーマ]を開き、カスタマイズの「▼」から「HTMLを編集」を選択。
headタグの下にコピーしたコードを貼り付ければ良いのですが……そのまま貼り付けるとエラーが出て保存できません。
- すべての link タグの最後に「/」を付けてタグを閉じる。
- 2 行目の crossorigin を crossorigin="crossorigin" に変更。
- 3 行目の「&」を「&amp」に変更(&を小文字にしてください)。
保存ボタンを押下して保存できれば準備は OK です。ひとつ前の画面に戻ります。
カスタマイズボタンを押下して、カスタマイズページに遷移します。
[詳細設定]のドロップダウンリストから「CSS を追加」を選びます。
ブログすべてにWebフォントを適用したいのであれば、カスタムCSSに先ほどコピーしたCSSを「*」で全体に適用すればOK。 例えばこんな感じ。「*{font-family: 'Noto Sans JP', sans-serif;}」
編集後は忘れずに保存しましょう。