 ブログのフォント変更と確認 [What Font][M⁺FONTS]

使っているこのブログのフォントを変更してみた。変更前はHelveticaで書いていて変更後の今はM⁺FONTSにした。M⁺FONTSは最近知ったフォントなんだけど以前にも何度かフォントを変更しようとしたけれど達成せずにきた。

f:id:tomi_kun:20210913174046j:plain

Webで調べて何度か挑戦したがデザインCSSとかになると全く不得意で途中で投げ出していた。はてなブログの場合は本来デザインをカスタムで設定しないで既存のデザインを使うとフォントも設定済みになっているのか設定を変更する場所もない。Helveticaの設定もブログ開設当初のデザイン設定で決定されてそのままではないかと思う。現にはてなブログの設定のデザインCSSにはフォントの項目がない。

今回はMacに詳しくいつも相談にのってもらっているcolonちゃんに指導してもらってフォントの変更ができた。フォントの変更と言ってもiPhoneやiPadではSafariの「デスクトップ用Webサイトを表示」に設定しないと確認できない。ブログを読んでくれる殆どの方がスマホで閲覧されているのでフォントを変えても気づかれない自己満足に近い試みだ。

指導に従っていろいろな方法を試した。フォントなんていうシビアな案件は使うPCの種類やブラウザの違い何より当該フォントがインストールされているか否かと条件が異なるため指導してくれる方にはご苦労をかけた。

何度かCSSを書き換えてはアップしてブログを確認するのだがHelveticaとM⁺FONTSはさほど違いがなく判別が難しかった。なにかいい方法はないものか調べると「What Font」というSafariでは機能拡張がChromeにも拡張機能があった。
safariのWhatFont はApp Storeにある。ChromeのWhatFont は拡張機能Webストアで手に入る。
使い方は簡単でインストールしたブラウザの拡張機能のアイコンをクリックするだけでカーソルポインタをおいたテキストの・フォントの種類・スタイル・太さ・大きさ・行間を表示してくれる。WhatFontを使うことによってフォントの変更作業が進んでいることが確認できる。