https://simadzu.hatenablog.com/entry/google-fonts

はてなロゴ

ブログタイトルを中央寄せから左寄せに変更したのですが、それだけではつまらないので、タイトルのフォントも変更することにしました。

いろいろ調べて、はてなブログのテーマストアで使われているフォントのCSSを参考に、ブログタイトルのためだけにGoogle Fontsを導入することにしました。→ やめました

だけど、Webフォントは重いじゃないですか。ブログの表示が遅くなるのはイヤだなぁ。
と思って調べてみたら、必要な文字列だけを指定して読み込みができるみたいです。

（設定→詳細設定→「<head>要素にメタデータを追加」にコードを入力）

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

ついでに、タイトルのリンクをマウスオーバーしたときに下線を表示するようにします。
また、リンクの下線（text-decoration:underline）がちょっと太い（3px）ので変更。

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
#title a {
    padding: 0 0 2px;
    text-decoration: none;
}

#title a:hover {
    border-bottom: 2px solid #000;
}

リンクの下線をtext-decorationではなくborderで表示。