はてなブログでふい字を使ってみるテスト

はてなブログでふい字（漢字も使える手書き風の日本語フォント）が使える（はてなブログに組み込まれている）ことを知ったので、ためしにこの記事で使ってみました。

FOXISM - はてなブログでふい字が使えたのでメモ風cssを作ってみたを参考に、メモ風cssでふい字を表示しています（画像を使わないでCSSだけで表現できるのがすごいです！）。

どこで生れたか頓（とん）と見当がつかぬ。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。

この書生というのは時々我々を捕（つかま）えて煮て食うという話である。

Qiita - CSSでwebフォントの読み込みが遅い問題を改善する方法を参考に、ふい字が読み込まれるまでは、ローカルフォント（sans-serif）でテキストを表示するように、CSSで「font-display: swap」を指定しています。

CSS
<style>
@font-face {
   font-display: swap;
   font-family: HuiFontP109;
   font-style: normal;
   font-weight: 400;
   src: url(/fonts/public/HuiFont/HuiFontP109.woff) format("woff");
}
</style>

ふい字のファイルサイズが大きいので（1.5MB）、このページが重かったらごめんなさい。