このブログで時たま載せているプログラミングのコード部分にGoogle Fontsを適用させてみました。
ちょっとつまずいた所があったので、Bloggerを使っている人には参考になるかもしれないと思い、記事にしておきます。

これまでも、code-prettifyでシンタックスハイライトを適用していますが、フォントも可読性の高いものを指定した方がいいのかな、と考えていました。
なので、手っ取り早くWebフォントにしてみました。

フォントの中から「Source Code Pro」を「＋」マークで選んで、生成されたlink要素

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">

を「テーマ」→「HTMLを編集」でコピペしようと思ったら……。

なぜか「更新できませんでした」になってしまいました。

理由が分からないので、「以前のBloggerに戻す」から再度HTMLを編集してみたら、

「XML の解析中にエラーが発生しました。行 14、列 78: The reference to entity "display" must end with the ';' delimiter.」

のエラーが表示。
どうやら&が入っていることで、特殊文字だと思われてエラーになっている様子。
URLの一部なので&に代えるわけにもいかないわけで。

どうしたものかな、と思っていたら、&display=swapはfont-displayを設定するためのもので、省略しても問題なさそうです。
そのため、&display=swapはざっくり削りました。

参考：Use font-display - Get Started with the Google Fonts API

あとはテーマのCSSに

code{font-family: 'Source Code Pro', monospace;}

を追加。

新しいBloggerの画面だとエラー内容がまったく分からないので戸惑いましたが、無事に導入できました。