title: フォント周りを整理した
author: Amane Katagiri
summary: エモ〜い
date: 2017-06-27T21:45:00+09:00
modified: 2022-06-14T11:19:00+09:00
category: tech
license: CC BY 4.0
rating: sfw
ai_summary: 自サイトのフォント環境を整理し、リポジトリ内の巨大なフォントファイルを削除した記録です。M+の公式Webフォントへの切り替えや、mdx_unimojiとtwemojiを用いた最新絵文字への対応プロセスが解説されています。なお、2022年の追記ではWebフォントの使用自体を廃止し、Twemoji画像を直接読み込む構成に変更したことが報告されており、サイトの軽量化とメンテナンス性向上を図っています。
ai_keywords: Webフォント, M+ FONTS, 絵文字, twemoji, mdx_unimoji, 最適化, サイト改善, Python, Markdown, 軽量化

++(2022-06-14) もうこのサイトではWebフォントを使用していません。また、絵文字についても[Twemoji](https://twemoji.twitter.com/)から取得した画像を直接読み込むよう変更されています。++

[TOC]

みなさんはWebフォントを知っているだろうか。

Webフォントというのは便利なものである。ひとたび`@font-face`と適切なURLを記すと、毎年のように書き換えていた`fomt-family: "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", ...`といった祝詞に悩まされる必要がなくなるという。

このサイトでも、祝詞の呪いから逃げるようにして、`/fonts/`以下に配置されている`mplus-1m-regular.ttf`（等幅）、`mplus-1p-regular.ttf`（プロポーショナル）、`EmojiSymbols-Regular.woff`（絵文字）をロードしていた。しかし、このやり方は以下の点であまり良くない。

* サブセット化していないため、サイズが大きい[^largefont]。
* 絵文字フォントが古い[^oldemoji]。
* レポジトリにフォントファイルを突っ込んでおくのはあまり気持ちがよくない。

[^largefont]: mplus-*の2つを合わせて3MBほどだった。
[^oldemoji]: Emoji Symbols Fontは、Unicode6.0から更新がない。

というわけで、フォント周りの整理をした。

# emoji

:sparkles: 絵文字 :sparkles: 周りは[Markdown](http://pythonhosted.org/Markdown/)の拡張である[mdx_unimoji](https://github.com/kernc/mdx_unimoji)に任せていたため、ここに乗っかることにした。

:emoji:→絵文字変換の先行事例として、[IME でも:muscle:みたいに Emoji を入力したい！ - pockestrap](http://pocke.hatenablog.com/entry/2017/03/05/193553)という記事がある。これを参考に、[emoji_strategy.json](https://raw.githubusercontent.com/Ranks/emojione/master/emoji_strategy.json)からmdx_unimojiに渡せる形式の辞書になるようなjsonファイルを生成するPythonスクリプト [emoji_generator.py](https://gist.github.com/amane-katagiri/687654c0dc00736aba69235e27025d4e) を書いた。

生成したjsonファイルを`json.load`して、mdx_unimojiの`emoji`パラメータに渡すと、`:the_newest_emoji:`を最新の絵文字に変換して出力してくれる。これを[twemoji](https://github.com/twitter/twemoji)などで`parse`してやれば、綺麗な絵文字が労せず表示できるというわけ。JavaScriptが無効だったらまぁ残念でした。

EmojiSymbols-Regularは消した。

:sunny: :sunglasses: :sunglasses: :sunglasses: :sunny:

# その他

M+の質感を失いたくなかったので、こちらは[公式のWebフォント](http://mplus-fonts.osdn.jp/webfonts/)に乗っかってレポジトリのフォントファイルは消した。M+ Webフォントは和文欧文合わせても500KBちょっとで済む。

祝詞は以下の通り。たぶんしばらく変えない。

```css
body {
    font-family: "M+ web 1p regular", "M+ web regular", "M+ 1p regular", "MigMix 1P", sans-serif;
}
code, pre {
    font-family: "M+ web 1m regular", "M+ web regular", "M+ 1m regular", "MigMix 1M", monospace;
}
```

# おわりに

フォントをレポジトリから全部消せてよかった。