BloggerでフォントをNoto Sans JPに変更する

2020年5月15日金曜日

Blogger

t f B! P L
サイトのフォントをNoto Sans JPに変えてみました。
今まで「游ゴシック体」優先で表示するように設定してたんですが
適当にサイト巡回してたら「Noto Sans JP」使ってるとこに当たってこれ見やすくね?
ってなったんでパクってみた。飽きたら戻すかも。

フォント:游ゴシック体


フォント:Noto Sans JP


太さ400でレギュラーってなってるけど明らかにぶっとくて笑う。
見やすいけど太すぎるとちょいごちゃっとしてる印象もありますかね。

blogger でのフォントNoto Sans JP変更方法

ちょっと苦戦したんで忘備録。

まずGoogle FontsのNoto Sans JPのページでコードを取得してきます。
今だと上に貼ったような画像が出るんで好きな太さを決めて「+Select this style」で選択。



右側に「Selected family」ってのが開きます。
自動で開かなかったら右上の四角いアイコンをクリック。


「Embed」選ぶとコードが2種類表示されます。
この二つをbloggerの「HTMLの編集」から貼り付け。

<link>のコードは<head>の後に貼り付け

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

今だとこんなコード。
貼る場所は<head>の後ならどこでも良いです。面倒なら真下にでも。
ただこのコードそのままbloggerに貼ると以下のエラーが出ます。

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

これはコードの中の「&」を読み込めないのが原因なので特殊文字の「&amp;」に変更すれば解決します。

CSS rules~のコードはCSS内のfont-familiy部分を変更


画像はテンプレートQooQの該当部分。
HTML編集内をfont-familyで検索すればすぐ見つかると思います。
他のフォント指定と同じ形で「"Noto Sans JP",」を先頭に記載すればおk。
これでblogger のフォントがNoto Sans JPに変更されます。

人気の投稿

ブログ アーカイブ

ページビューの合計

QooQ