さて、この WordPressのブログにあてているGoogleの日本語Webフォントを、またまた変更することにした。
この間、4年ぶりに変更したばかりだというのに。
だって仕方ないじゃないか。
ずっとお世話になっているM PLUS シリーズの最新作、『M PLUS U』に出くわしたのだ。
前作のバリアブルフォント化に加えて、ついにユニバーサルデザインが取り入れられたUDフォントになっているんだぜ！
M PLUS U
M+ FONTS は、日常使用に適したやや便利なフォントファミリーです。Mplus U は、Thin から Black までの 9 つのウェイトを持つサンセリフ体フォントで、GF Latin Plus を使用して日本語用の 5,700 字以上の漢字をサポートしています。視認性、可読性をさらに向上させるため、グリフの内部空間は幅を広げ、かな文字上の有声音/半声音マークのサイズを最大化するよう設計されています。このフォントは UI での使用、およびアクセシブル/可読性フォント（UD フォント）として意図されています。副作用として、このフォントはとても可愛らしい外観です 🙂
WordPress フォントライブラリ機能
覚えたばっかりのフォントライブラリ機能だけど、この機能のおかげでWordPressからGoogle Fontsを使用するのは、本当に簡単になった。
外観＞フォント＞フォントをインストール
表示されるGoogle Fontsの一覧から、『M PLUS U』を選択してインストールすればOK。
使用するウェイトが決まっているのならば、それを選択してインストールすればいい。
バリアブルフォントのアップロード
でも、せっかくのバリアブルフォントなんだから、シンプルに、ひとつの可変ファイルの読み込みで完了させたいよね。
それも簡単に実行できる。
自分のサーバーにファイルを一つアップロードするだけだ。
僕はGoogle Fontsを利用させていただくとき、webフォントにとどまらず、Macでも利用させていただいている。
だから、フォントをダウンロードしてFont Bookにインストールしている。
そのダウンロードするフォルダの中に、アップロードに必要なファイルが存在している。
『M PLUS U』をGoogle Fontsの公式ページからダウンロードすると、ZIPの中に MPLUSU-VariableFont_wght.ttf というファイルが入っている。
このひとつのファイルをアップロードすればいい。
アップロードの手順
管理画面の「外観」→「フォント」を開き、画面上部にある「アップロード」タブを選択。
MPLUSU-VariableFont_wght.ttf のファイルをアップロードすればOK！
完了すると、ひとつの可変ファイルがライブラリに反映されている。
ただし、この方法はGoogle Fontsの強力なCDNを利用せずに、自前のレンタルサーバーの能力に頼ることになる。
その辺りのメリットとデメリットをGeminiに聞いてみた。
自分のドメインとサーバーでフォントも含めて完結させる
ALOGの思想やこれまでのサーバーまわりのこだわり（自前でのボット対策やセルフホストの構築など）を踏まえると、ずばり「アップロード（自社サーバーでのホスティング）」をおすすめします。
それぞれの特徴を整理すると、選択の基準が見えてきます。
1. アップロード（自社サーバー配信）をおすすめする理由
- 完全な自己完結と「アンプラグド」な美学： Googleなどの外部CDNに依存せず、すべての素材を自分のサーバー（
alog.tokyo）のなかに抱えて完結させられます。外部との無駄な通信が発生しないため、ブログの佇まいとして非常に美しく、ロマンがあります。 - 外部障害からの独立： 万が一Google Fonts側やネットワーク経路で何らかのトラブルがあった場合でも、影響を受けずに自社内で完結します。
2. CDN（Google Fonts）のメリット
- ブラウザキャッシュの強力な恩恵： ユーザーが他のサイトで同じGoogle Fontsを読み込んでいる場合、キャッシュが効いて表示が高速になるメリットがあります。
- メンテナンスの自動化： URLを貼るだけで済むため、フォントファイルの管理や容量をサーバーに持たせる必要がありません。
結論として
フォントファイル（約4.2MBのバリアブルttf）をサーバーにアップロードして使う形であれば、サーバーへの負荷も日常のアクセス規模であれば全く問題ありません。
「外部サービスに頼らず、自分のドメインとサーバーでフォントも含めて完結させる」という観点から、さきほどのバリアブル .ttf ファイルをアップロードしてCSSで @font-face を組む方法が、ALOGのスタイルに一番しっくりくるはずです！
テーマ全体に反映させるならCSSを
まあ、そんなに大げさな話でもないんだよ。
Google Fontsの強力なCDNを利用しないことでのデメリットがないのがわかれば十分だ。
WordPressのフォントライブラリ機能のおかげで、記事の中で、このフォントを使うのなら、CSSの追記も必要ない。
ただエディターの中で選択すればいいだけだ。
ただ、僕は、記事以外の部分（例えばウィジェット、メニュー、サイドバー、あるいはテーマ独自のパーツなど）にも、ブログ全体にも、指定したwebフォントを反映させたかったから、CSSを追記してある。
範囲指定が苦手なので、Geminiに範囲をピックアップしてCSSを記載してもらってる。
/* table, th, td を含め、サイト全体に M PLUS U を適用 */
html, body, div, p, a, li, blockquote, input, textarea, button, select, span,
h1, h2, h3, h4, h5, h6, .site-title a, .entry-title, .widget-title, .more-link,
table, th, td {
font-family: 'M PLUS U', sans-serif !important;
}Tumblrにも使用
せっかくだから、僕のTumblrサイトにも、『M PLUS U』を設置することにした。
僕が使用しているのは、結局、Tumblr Officialテーマ。
なんだかんだで、Grid表示できるところが気に入っている。
こちらは、従来通り、Google FontsのCDNを利用する方法しかない。
テーマHTMLエディタ画面での手順
1. 左側のHTML編集画面で、<head>（6行目あたり）の中に、Google Fontsの公式ページからコピペしたEmbed codeを追加。
<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=M+PLUS+U:wght@100..900&display=swap" rel="stylesheet">2.カスタムCSSを追加（サンプル）
/* Custom CSS */
{CustomCSS}
/* M PLUS U 全体適用 */
body, button, input, select, textarea,
.blog-title, .description, .post, .title, body * {
font-family: 'M PLUS U', sans-serif !important;
}ただでさえ少ないTumblrのユーザーの中で、ブラウザ経由でアクセスしようなんてユーザーが、どれほど存在するのって感じだよね。
だから、ここは完全な自己満足だ。
唯一無二のフォント
なんだかんだ言って、振り返れば、このM PLUS シリーズに、僕はもう10年もお世話になっている。
Googleの日本語ウェブフォント「Rounded M + 1c」をWordPressに設置 – ALOG
やたらテキストばっかりで殺風景になりがちな僕のブログにおいて、ほんのりとやわらかなアクセントを与えてくれる存在。
しかし、甘くなり過ぎもせず、すっきりとした読みやすさも維持してくれる。
この間、Geminiの猛プッシュにより、ブログのwebフォントをIBM Plex Sans JPに変えてみた。
悪くはなかった、Geminiが勧めるとおり。
ただ、何か後ろ髪引かれるものがあったんだ。
そうして、今年、『M PLUS U』が誕生していたことに、ついさっき気づいたというわけだ。
あらためて、この独特の柔らかさは、しっくりくるよね。
Geminiは今も、IBM Plex Sans JPを推してるけれど、僕はやっぱりこっちかな。
しかも、10年前から変わらぬテイストを醸し出してるだけじゃない。
バリアブルフォントになり、ユニバーサルデザインを取り入れたUDフォントになり、しっかりとモダンなフォントに進化している。
フリーフォントで、その両方の要素を満たしているものって他には存在しないんじゃないのかな。
Geminiも、間違いないと裏付ける。
「バリアブル（可変ウェイト）」と「UD（ユニバーサルデザイン）」を兼ね備えた日本語の完全フリーフォントというのは、現時点のWebフォント界隈を見渡しても、この『M PLUS U』がほとんど唯一無二の存在です。
日本語フォントは英字と違って数千字以上の膨大な文字セットを作る必要があるため、UDデザインに仕上げるだけでも並々ならぬ労力がかかります。そこに加えて、100〜900の数値を無段階でシームレスに変形させるバリアブル軸を組み込み、さらにオープンソース（OFL）で開放するなんて、フォント制作の苦労を考えると破格すぎますよね。
あらためて、大盤振る舞いしてくれるオープンマインドな人たちに感謝だよね。
そうして、それを支えるGoogle Fontsという仕組みを作った人たちにも。
こうしたものに触れるたび、まだオープンなインターネットのカルチャーが残されていることに、そのライトサイドが残されていることにホッとするんだよね…
ここは感謝して、存分に使わせていただくことにしよう。
本当にアリガトウゴザイマス！
Amazon