Troubleshooting - Blogger にGoogle Fontsを入れて日本語フォントを変更する

日付:

2020年元旦、あけましておめでとうございます。Yukonです。
Google bloggerのデフォルトフォント（日本語）がイケていない件、ようやく着手する気になりました。この記事では設定作業中にはまったTroubleshooting #1 - #3 について紹介します。
  • Troubleshooting #1 XML解析エラー No.1 
  • Troubleshooting #2 XML解析エラー No.2
  • Troubleshooting #3 指定したフォントがBloggerに反映されない？

Troubleshooting #1

Error 1：”The reference to entity “display” must end with the ‘;’ delimiter. ”

XMLの解析中にエラーが発生しました。 The reference to entity “display” must end with the ‘;’ delimiter.

対処

STEP1でコピーしたLink codeの （＆）記号を、 & に置き換える必要があります。

これがGoogle fontsからコピーしたEmbedのStandardの記述です。


この中にある＆を探してそこを**& amp;**に置き換えて保存してエラーが消えるかどうか確認してください。


Troubleshooting #2


Error 2 : "The element type “link” must be terminated by the matching end-tag “”. "

XML の解析中にエラーが発生しました。行 xxx、列 xxx: The element type “link” must be terminated by the matching end-tag “”.

対処

要は、linkタグを閉じてね、と言っています。
Google fontsとGoogle bloggerは同じ会社のサービスなんだからそこまで用意してくれればいいのに、と思わないでもないですが、このエラーが出たら記述変更が必要です。

STEP3でコピーしたCSS表記のrel=“stylesheet"の直後に半角スペースを入れて、”/" を追加します。以下がGoogle fontsからコピーしたEmbedのStandardの記述です。




これを修正すると以下のようになります。

Troubleshooting 3 指定したフォントがBloggerに反映されない？

エラーは出なくなったのにフォントが正常に反映されていないという場合には、フォントのSTEP3のCSSの記述で読み込むフォントの優先度設定をすると効果があるかもしれません。私はこれでようやく解決しました。

対策

STEP3の画面で、san-serifの後に　!important を追加します。
* {  
body {font-family: 'M PLUS 1p', sans-serif !important;}
}
複数フォントの場合は以下の通り。
* {
body {font-family:  'M PLUS 1p','meiryo','Hiragino Kaku Gothic ProN', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif !important;
}
以上で、これでGoogle fontsを使ったBloggerの日本語表示が期待通りになっているはずです。




















































コメント








コメントを投稿