Blogger・Google Fontsを導入する際のエラー原因とその対処方法

Blogger では標準で多くの Web フォントが使えるようになっていますが、標準以外のテンプレートを使用している場合は、Web フォントを使用するのに「 Google Fonts 」の導入を考えるかと思います。
しかし、いざ導入しようとしてもエラーとなり、更新できずに諦めてしまった人も多いのではないでしょうか。
Blogger に Google Fonts を導入するには少し工夫が必要なので、そのあたりを説明していきます。

更新できない原因は URL に含まれる「 & 」

導入するには Google Fonts でコピーしたコードをペーストするのですが、Blogger の HTML 編集では特定文字のエスケープが必要になってきます。

ペーストするコードの中には「 & 」が含まれているので、これをエスケープ文字の「 & 」に書き換えなければなりません。
以下の例のように、display の前に「 & 」があるのでこれを書き換えます。

※ 上段が書き換え前、下段が書き換え後
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Oswald&amp;display=swap" rel="stylesheet">

最後に「 / 」で閉じたかたちにする

Blogger のHTML 編集では閉じたかたちで記述する必要があるので、コードの最後を以下のようにします。
<link href="https://fonts.googleapis.com/css?family=Oswald&amp;display=swap" rel="stylesheet"/>

おさらい

Blogger で Google Fonts を導入するためのコードは、「 & 」を「 &amp; 」に書き換えて、最後は「 / 」で閉じたかたちにする。

以上の2箇所を編集すると HTML の更新ができ、無事 Google Fonts を使えるようになります。あとは反映させたいところに「 font-family 」でフォントを指定するだけです。
Google Fonts