はじめに

はてブで趣味ブログをはじめようと思ったのですが、フォントが気に入らない！！と思い、Webフォントを導入してみようと思いました。

Google Fontsでフォントを探す

手書きフォントが好きなので、Yomogiにします。

選ぶ

Yomogiのページのダウンロードしたいスタイルの右の方に「select this style」というリンクがあるのでクリック。

画面右側にサイドバーが現れまして、Use On Webって書いてあります。

<link>のラジオボタンを選択すると、その下にhtmlコードが表示されるので、コピーします。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">

ブログにフォントを注入する

はてブの管理画面のデザインから、カスタマイズ→「ヘッダー」を選び、先ほどコピーしたhtmlコードを貼り付けます。

注入って...DIかよ

CSSでフォントを適用する

Google FontsのYomogiのページのサイドバーにCSS rules to specify familiesって書いてあります。ここにCSSコードが書いてあるので、コピーします。

font-family: 'Yomogi', cursive;

はてブの管理画面のデザインから、カスタマイズ→デザインCSSを選び、下記のような感じでCSSを書きます。

body, #title, .entry-title {
font-family: 'Yomogi', cursive;
}

最初はbodyだけ指定してたのですが、ブログのタイトルと、記事タイトルがうまくフォントが変わらなかったので無理やり指定しました。ちょっと汚い。

以上です。

ほんで

ブログのフォントを変えられました！が、満足してないのでまた変えるかも。

B5ノートの右の方

ゲームが好きなエンジニアのブログ

はてなブログでGoogle Fontsを使ってみる

はじめに

Google Fontsでフォントを探す

選ぶ

ブログにフォントを注入する

CSSでフォントを適用する

ほんで

参考