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タグの下にコピーしたコードを貼り付ければ良いのですが……そのまま貼り付けるとエラーが出て保存できません。

  1. すべての link タグの最後に「/」を付けてタグを閉じる。
  2. 2 行目の crossorigin を crossorigin="crossorigin" に変更。
  3. 3 行目の「&」を「&amp」に変更(&を小文字にしてください)。

保存ボタンを押下して保存できれば準備は OK です。ひとつ前の画面に戻ります。

カスタマイズボタンを押下して、カスタマイズページに遷移します。

[詳細設定]のドロップダウンリストから「CSS を追加」を選びます。

ブログすべてにWebフォントを適用したいのであれば、カスタムCSSに先ほどコピーしたCSSを「*」で全体に適用すればOK。 例えばこんな感じ。「*{font-family: 'Noto Sans JP', sans-serif;}」

編集後は忘れずに保存しましょう。

このブログの人気の投稿

コピーした行の挿入が表示されない時はフィルタされていないかチェック

Excel で入力した文字に勝手に取り消し線が入る