はてなブログ

『はてなブログ』に手書き風のWEBフォントふい字を使ってみた

f:id:langnerdmom:20210320074513j:plain

こんばんは!

ブログのカスタマイズが楽しくて、他に何もできないAïです。

今回は、『はてなブログ
』で手書き風フォント『ふい字』が使えると知り、さっそく試してみました😍❤️

適用したらこんな雰囲気\(^o^)/
f:id:langnerdmom:20210320075201j:plain:h300

WEBフォントを使うデメリット

ブログの表示速度が極端に遅くなる!

導入するかどうかは、よく考えてから決めてくださいね💦

このブログで試してみましたが、表示スピードが遅くなった為、使わないことにしました。

カスタマイズをする時は、必ずバックアップを取って自己責任でお願いします。


ふい字をはてなブログで使う方法

参考記事はてなブログのデザイン「Minimalism」で、ブログタイトルのフォントをふい字に変更する方法 – いちcafe日記

CSSでWEBフォントを読み込む

下のコードをデザインCSSに貼り付けます。

/* ---------ふい字------------ */
@font-face {
font-family: 'HuiFontP109';
src: url('/fonts/public/HuiFont/HuiFontP109.eot');
src: url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), url('/fonts/public/HuiFont/HuiFontP109.woff') format('woff'), url('/fonts/public/HuiFont/HuiFontP109.ttf') format('truetype'), url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
font-weight: normal;
font-style: normal;
} 

ブログでふい字を使いたい箇所にフォントを追加

ブログ全体でふい字を使う場合

html, body{
font-family: 'HuiFontP109', sans-serif;
}

このコードを、デザインCSSに追加してあげると変更されます!

ブログタイトルにだけふい字を使う場合、

#title a {
font-family: 'HuiFontP109', sans-serif;
} 

を追加。

使ってみたいところに適用してあげてくださいね♥

ちょこっと注意書き

使っている『はてなブログ』のテーマによってうまくいかないこともありますので、

  • 適用したいところだけ
  • 適用できてない箇所

などは、Google Chromeの検証機能を使って適宜変更してください。

忙しいワーママでも「はてなブログPro」でなら、簡単なのに本格的なブログが始められる


せっかくだから独自ドメインも❤






私は独自ドメインをムームードメインで取りました。