夜田たんの知的生活実践

ほそく・ながく・ゆるく続くブログを目指します(だいたい週一で更新中)

コードの部分にGoogle Fontsを導入してみた

program codes written with google fonts

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

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

picking up google fonts

picking up google fonts

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

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

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

error on Blogger theme editor

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

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

error on Blogger theme editor

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

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

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

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

あとはテーマのCSSに

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

を追加。
edit CSS on Blogger theme editor

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