WordPressで日本語をフリーフォントに変えてみる

フォントの変更

WordPressのフォントをGoogle Fonts + 日本語のWEBフォントからフリーのフォントに変えてみた時の備忘録。

Google Fonts + 日本語はフォントの種類が９種類（2020年3月28日現在）しか無いがフリーのフォントは無数にあるので個性的なフォントに変更することができる。

尚、このブログはWebフォント、Google Fonts + 日本語 早期アクセスの「自家製フォント工房」さんのフォントを使用している。

※Webフォントを設定した時の記事はこちら。

フォントも気に入っているので当面こちらのフォントでいくつもりだけれども、以前にフリーフォントも試してみたのでその時のことを書いておく。

当面こちらのフォントと言っているそばから何だが、今はフォントはNoto Sans JPに変更している

尚、フリーフォントの適用はこのサイトではなくOracle VM VirtualBoxを使ってWindowsのVM環境にUbuntu Srver 16.04LTS、Wordpressをインストールして試してみた。

※VM環境を構築した時の記事はこちら。

手順

大まかな手順は以下の通り

1. 気に入ったフリーのフォントを見つけてダウンロードする
2. Webフォントの形式（WOFF）に変換する
3. WOFFファイルを自サーバーにアップロードする
4. style.cssにアップロードしたフォントを指定する

フォントを探す

検索ワード「フォント フリー」で検索すると沢山のフリーのフォントが出てくる。

その中から「タイムマシンわ号」をインストールしてみる事にした。

理由は、

• ゴシック体だったから（ゴシック体が読みやすいので）
• ひらがな・カタカナ・漢字が揃っている
• 手書きっぽい個性的、しかも読みやすかった
• 商用利用OK（商用利用をする積りは無いけど、本サイトにはバナー広告が入っているので念の為）

等々。

ダウンロードしてローカルのハードディスクに保存した後、zip形式だったので展開すると、

• readme.txt
• timemachine-wa.ttf

と２つのファイルが現れた。

Webフォントの形式（WOFF）に変換する

ttf（true type font）形式のフォントをWOFF（Web Open Font Format）に変換する。

WOFFコンバーターをインストールした後、起動すると以下の画面が表示される。

「変換開始」をクリックすると、

• timemachine-wa.eot
• timemachine-wa.woff

が作成される。

フォントのサブセット化について（任意）

Webフォントはページを読み込むタイミングでサーバーからフォントを読み込むので最初はフォントが読み込まれるまでは、文字が表示されなかったり正しいフォントで表示されない。

また上記の”タイムマシンわ号”のフォントサイズ（ttf）は約7.3MByte。

WOFFコンバーターで変換すると約半分の3.7MByte（woff）になった。

他のフォントでも試してみると元のサイズからおよそ50%～60%のサイズになり、変換後で2MByteから4MByteのWebフォントのサイズになった。

その為、自サーバーの能力が十分でない時は少しでもフォントサイズを小さくしたいので対象文字を第一水準だけに絞る方法（サブセット化）がある。

”タイムマシンわ号”では0.8MByte（woff）まで小さくなった。

これぐらい小さくなれば、まずまずのサイズだが当然の事ながら第１水準以外の漢字は指定したフォントで表示されない。

そして第二水準漢字で使いそうな漢字がそれなりにある。

例えば天丼の”丼”、名誉毀損の”毀”、咎める（とがめる）、會社（かいしゃ）の”會”でこちらの漢字をつかっている会社もある。

その場合は（環境によっても異なるが）その文字だけ代替フォントが適用されて表示される。

第二水準漢字の漢字だけubuntuの日本語フォントのtakaoフォントで他の文字は”タイムマシンわ号”で表示されている。

確実に第1水準漢字しか使わないと分かっているサイトならともかく、ブログだと厳しいのでサブセット化はケースバイケースだと思う。

このサイトはサーバーの能力がそれ程高くないので（AWSのt2.micro）フルサイズのWOFFを自サーバーに用意するとダウンロードにそれなりの時間が掛かってしまうのでフリーのフォントは使わないでGoogle Fontsを使っている。

しかし、誰かの役に立つかも知れないので一応サブセット化の方法も記述しておく。

サブセット化

１．サブセットフォントメーカーをダウンロードしてインストールする。

２．事前にSJIS第一水準漢字のテキストファイルを用意する

検索をして第一水準漢字を探すか、一応こちらのページにも用意しているのでコピペしてテキストファイルに保存する

３．サブセットフォントメーカーを起動する

「作成開始」ボタンを押すと第一水準漢字だけが抽出されたttfファイルが出力されてサブセット化される。

後は先程の手順でサブセット化したttfファイルからWebフォントを作成する。

WOFFファイルを自サーバーにアップロードする

FTP、WinSCPなどでwoffとeotファイルを wordpresインストールフォルダー/wp-includes/fonts/～ にコピーする。

自分はWidows上のVM環境に用意したubuntu（Linux）なので共有フォルダ経由でコピーしてchownコマンドでファイルの所有者とグループを変更した。

※ ubuntu OS の場合、www-dataが apache等のWEBサーバーを操作するデフォルトのユーザとグループ

cd /var/www/wp-includes/fonts
sudo chmod 644 timemachine-wa.eot
sudo chmod 644 timemachine-wa.woff
cd ./../
sudo chown -R www-data:www-data fonts

style.cssにWebフォントを追記

WordPressのメニューの外観ー＞テーマの編集からstyle.cssを呼び出して下記のコードを保存する

@font-face{ 
font-family: "timemachine-wa";
src: url("http://ドメイン名/wp-includes/fonts/timemachine-wa.woff") format("woff"),
url("http://ドメイン名/wp-includes/fonts/timemachine-wa.eot") format("eot");
}
body {
font-family: "timemachine-wa";
}

ドメイン名には今回の例ではVM環境なので”localhost:8880”を指定している。

以上で”タイムマシンわ号”のフォントが設定された。