Blowfishのフォントを変更したりする

Blowfish
#

Blowfishはhugoのテーマの一つで、このサイトでも使用しています。

Blowfish

blowfish.page

公式サイト

このテーマ、見た目がおしゃれでかっこいいんです。

フォントの変更
#

いろいろやり方はあると思います…。
しかし今回はlayouts/partials/extend-head.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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Inter', 'Noto Sans JP', sans-serif;
    }
</style>

プレビューサーバーを再起動すればおそらくフォントが変わっているはずです。

なお適用するフォントはお好みで変えていただいてかまいません。
私はInterとNoto Sans JPの組み合わせが好きなので、これにしています。

cdn経由のフォントは遅いと見たことがあるのですがあまり気にならないのでｶﾞﾝｶﾞﾝ使っています。
ソフトバンクエアーじゃない限り快適だと思う。うん。

Twemojiにする
#

🤔🤔🤔🤔🤔

↑これです。

なぜこれをするか。それはドコモ端末からのアクセス時に見にくい絵文字を回避するためです。
ドコモで購入するAndroid端末のほとんどにはドコモのクッソ見にくい絵文字が入っていて、すごく見にくいのです。

後は見た目がフラットで美しいので…

さっきのhtmlファイルに以下を追記。

<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        twemoji.parse(document.body, { folder: "svg", ext: ".svg" });
    });
</script>

<style>
    img.emoji {
        display: inline;
        height: 1em;
        width: 1em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.1em;
    }
</style>